6 ms·
Pure CSS Francine
- shdon 8y agoFirefox 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 8y agoLooks like Safari is the new ugly stepchild. I’m on mobile Safari and it crashes the tab.
- tehwebguy 8y agoWorks for me, has some imperfections though
- fireattack 8y ago>Firefox seem render[s] it flawlessly It doesn't. Almost all highlights are missing. Compare side by side with Chrome's.
- Freak_NL 8y agoI 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 8y agoHoly moly! I wouldn't have thought this was possible if I didn't see the code.
- sexy_seedbox 8y agoLooks great in IE7! https://github.com/cyanharlow/purecss-francine/issues/3 https://github.com/cyanharlow/purecss-francine/issues/3 :D
- acjohnson55 8y agoFirefox for Android too!
- Aardwolf 8y agoFor 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 8y agoThat's similar to a cubist picasso imho... not bad actually...
- reificator 8y agoI typically read the comments first to determine whether or not to read the article. So I saw this version before the normal one...
- harrygeez 8y agoThat my friends, is how you get modern art
- agildehaus 8y agoProof that "graceful" degradation is a lie.
- alexanderdmitri 8y agoAn article about the piece: https://motherboard.vice.com/en_us/article/9kgx7p/painting-made-with-code-html-pure-css-browser-art-diana-smith https://motherboard.vice.com/en_us/article/9kgx7p/painting-m...
- maddyboo 8y agoAnother article [1] about how the piece renders in other old browsers. I think it's super interesting that even mis-rendered versions have a really cool abstract look to them. [1] https://www.vox.com/2018/5/3/17309078/digital-art-diana-a-smith-francine-coded-browser-art https://www.vox.com/2018/5/3/17309078/digital-art-diana-a-sm...
- eridius 8y agoThis renders almost perfectly in Safari 11.1, except for the gradient on the shoulder.
- mattnewton 8y agoOn mobile safari it crashes the tab for me haha
- X-Istence 8y agoAnd the droopy eyes?
- eridius 8y agoOh you're right, I missed that, the corners of the eyes are boxy.
- jypepin 8y agoLynn 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/ https://a.singlediv.com/
- tokyodude 8y agoAt 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 8y agoSomebody sometime probably suggested someone should use JS to 'transpile' JS into HTML. And people listened.
- elliottkember 8y agoI posted it last time this was on HN, but here's what I managed to achieve in the web inspector: https://imgur.com/a/KKj82eZ https://imgur.com/a/KKj82eZ
- diiiimaaaa 8y agoI didn't want to sleep anyway.
- gaunab 8y agothat's fun. https://imgur.com/a/bRhLp1M https://imgur.com/a/bRhLp1M
- keithnz 8y agoI went to developer tools in firefox, slowed it down a bit trying to select elements! Would love to see the process she goes through to create it
- brailsafe 8y agoI don't even
- mateusaugusto9 8y agoamazing!
- notatoad 8y agoThat's really cool, but is there an original work that it's recreating? My Google-ing is only turning up American dad references.
- elliotec 8y agoNo, it is the original work. She did the art “in the style of 18th-century oil paintings.”
- lucisferre 8y agoOne day in the far future AIs will marvel at how humans once made these by hand.
- deleted 8y ago[deleted]
- anikdas 8y agoHer other work[1] is also pretty fascinating [1] http://diana-adrianne.com/purecss-zigario/ http://diana-adrianne.com/purecss-zigario/ edit: updated link
- ddtaylor 8y agoYou can do some hilarious things via the inspector too https://imgur.com/a/CaVlxWN https://imgur.com/a/CaVlxWN
- speeq 8y agoMore: https://github.com/cyanharlow/purecss-zigario https://github.com/cyanharlow/purecss-zigario https://github.com/cyanharlow/purecss-vignes https://github.com/cyanharlow/purecss-vignes
- deleted 8y ago[deleted]
- Exuma 8y agoCan anyone find a comment on how long this took? This is insane to me
- daveFNbuck 8y agoThe 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-frequency https://github.com/cyanharlow/purecss-francine/graphs/code-f...
- nneonneo 8y agoShe does mention that the first commit was already of a partially finished version: > Sadly the project began on my desktop, so my first git commits were of an already-in-progress drawing. from https://github.com/cyanharlow/purecss-francine/issues/13#issuecomment-386201939 https://github.com/cyanharlow/purecss-francine/issues/13#iss.... So, the actual amount of time taken is likely to be much longer. Also very worth checking out the timelapse gif posted there: https://imgur.com/K2xLX3g https://imgur.com/K2xLX3g
- jonstewart 8y agoHow to make this easy? wz_jsgraphics.js FTW. RIP, WZ. http://www.walterzorn.de/en/ http://www.walterzorn.de/en/ http://www.bjarne.altervista.org/walterzorn.html http://www.bjarne.altervista.org/walterzorn.html
- RandallBrown 8y agoThis takes me back to the first internship I ever had. I found this library and used it for displaying graphs in JS more than a decade ago. I shudder at the code I wrote during that internship.
- quickthrower2 8y agoWould it be "pure css" if you did it in SVG and embeded that into the css?
- rspeer 8y agoShe 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".
- ravenstine 8y agoBoy, is that fun to Inspect Element on! :)
- Aardwolf 8y agoFind the elements "eyebrow left" and "eyebrow right" and disable the checkbox of "border-color" of each to get super dark eyebrows!
- antoineMoPa 8y agoIf only youtube makeup tutorials were so easy...
- nmec 8y agoA missed opportunity to use the <head> and <body> elements
- okket 8y agoPrevious discussion from 2 weeks ago: https://news.ycombinator.com/item?id=16970774 https://news.ycombinator.com/item?id=16970774
- niceperson 8y agoliterally why?
- kowdermeister 8y agoart
- z3t4 8y agoI 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.
- ebonassi 8y agolet's look legacy browser AI art https://www.browserstack.com/screenshots/58c71d032613ad8536d199c459e533701384c9e0 https://www.browserstack.com/screenshots/58c71d032613ad8536d...