HN Explorer

54 comments

[ 3.2 ms ] story [ 99.2 ms ] thread
shdon
Firefox and Chrome seem render it flawlessly and Edge's performance isn't half bad either, but I am honestly surprised at how well it works even in IE11.
mattnewton
Looks like Safari is the new ugly stepchild. I’m on mobile Safari and it crashes the tab.
tehwebguy
Works for me, has some imperfections though
fireattack
>Firefox seem render[s] it flawlessly

It doesn't. Almost all highlights are missing. Compare side by side with Chrome's.

Freak_NL
I wonder which CSS declarations specifically are Chrome-only. It doesn't look like there's much needed to get it to render nicely in Firefox too.
jazoom
Holy moly! I wouldn't have thought this was possible if I didn't see the code.
sexy_seedbox
Looks great in IE7!

https://github.com/cyanharlow/purecss-francine/issues/3

:D

acjohnson55
Firefox for Android too!
Aardwolf
For me it looked fully correct in firefox for android (the actual website, not just the screenshot). It only made the app stop responding to button presses (not the first time it does that, fortunately restarting it fixes it and it can remember all its tabs)
flyGuyOnTheSly
That's similar to a cubist picasso imho... not bad actually...
reificator
I typically read the comments first to determine whether or not to read the article. So I saw this version before the normal one...
harrygeez
That my friends, is how you get modern art
agildehaus
Proof that "graceful" degradation is a lie.
eridius
This renders almost perfectly in Safari 11.1, except for the gradient on the shoulder.
mattnewton
On mobile safari it crashes the tab for me haha
X-Istence
And the droopy eyes?
eridius
Oh you're right, I missed that, the corners of the eyes are boxy.
notatoad
That's really cool, but is there an original work that it's recreating? My Google-ing is only turning up American dad references.
elliotec
No, it is the original work. She did the art “in the style of 18th-century oil paintings.”
lucisferre
One day in the far future AIs will marvel at how humans once made these by hand.
[deleted]
(comment deleted)
[deleted]
(comment deleted)
Exuma
Can anyone find a comment on how long this took? This is insane to me
daveFNbuck
The main page shows 246 commits and the code frequency tab under insights shows commits going back to June 2017. https://github.com/cyanharlow/purecss-francine/graphs/code-f...
quickthrower2
Would it be "pure css" if you did it in SVG and embeded that into the css?
rspeer
She says on the Francine README that she used to have a few hand-coded SVG shapes, but then realized she could do without them.

If you allow exporting from a graphics editor, a <table> where each cell is a pixel is "pure HTML".

jypepin
Lynn Fisher has also a great website that inspires me regularly. She draw using css and 1 single div. It's all about linear-gradient background. Very interesting.

https://a.singlediv.com/

tokyodude
At this point someone should just make an SVG to CSS converter then you could export from Illustrator or whatever to CSS and be done with it. NOTE: not suggesting CSS should be used this way.
rootlocus
Somebody sometime probably suggested someone should use JS to 'transpile' JS into HTML. And people listened.
ravenstine
Boy, is that fun to Inspect Element on! :)
Aardwolf
Find the elements "eyebrow left" and "eyebrow right" and disable the checkbox of "border-color" of each to get super dark eyebrows!
antoineMoPa
If only youtube makeup tutorials were so easy...
nmec
A missed opportunity to use the <head> and <body> elements
z3t4
I wonder if it would be harder to make this in .css vs .less. It would be cool to see some hand written SVG as generated SVG is always ugly and bloated.