4 ms·

She also made two more: http://diana-adrianne.com/purecss-vignes/ http://diana-adrianne.com/purecss-vignes/ http://diana-adrianne.com/purecss-zigario/ http://

She also made two more: http://diana-adrianne.com/purecss-vignes/ http://diana-adrianne.com/purecss-vignes/ http://diana-adrianne.com/purecss-zigario/ http://diana-adrianne.com/purecss-zigario/ She's avoiding SVG as a self-imposed challenge. > Rules I have for myself: > All elements must be typed out by hand > Only Atom text editor and Chrome Developer Tools allowed. > SVG use is limited, and all shapes can only use hand-plotted coordinates and bezier curves - without the aid of any graphics editor. https://github.com/cyanharlow/purecss-francine https://github.com/cyanharlow/purecss-francine Looks like people on birdsite have already been playing with this and it starts to get funny if you try it on older browsers: https://glitch.social/@cute_weeds/99955935010341256 https://glitch.social/@cute_weeds/99955935010341256

forgot-my-pw 9y ago
I wonder how much time it took to code them.
- jordigh 9y ago
  Judging by her commit history, she started June 24 and the last commit is from two days ago. There are several commits for every month, at varying densities. So, this project has been continuously gestating for about 9 months. Here's probably most of the interesting raw data, extracted with Mercurial, in case someone else wants to do a visualisation of her workflow. http://paste.debian.net/1022858/ http://paste.debian.net/1022858/ There's some interesting stuff in the history. For example, at one point, the painting looked quite different. https://github.com/cyanharlow/purecss-francine/blob/519afdd7d44a980bf908f6a721adfce273cbff99/preview.jpg https://github.com/cyanharlow/purecss-francine/blob/519afdd7...
mortenjorck 9y ago
The way it breaks in older browsers is incredible, and far more diverse and interesting than I would have ever imagined. Chrome 17, Firefox 3.6, Chrome 9, IE 5.1.7 Mac: https://twitter.com/waxpancake/status/991412919656005632 https://twitter.com/waxpancake/status/991412919656005632 Opera Mobile: https://twitter.com/coreh/status/991395667720507393/photo/1 https://twitter.com/coreh/status/991395667720507393/photo/1 Opera (unspecified older version): https://twitter.com/dz/status/991365966553591808/photo/1 https://twitter.com/dz/status/991365966553591808/photo/1 IE 9 (my personal favorite): https://twitter.com/jamieparkinson/status/991329118267609088 https://twitter.com/jamieparkinson/status/991329118267609088
- globuous 9y ago
  They really look like Picasso versions, absolutely incredible !!! So cubism's kinda like a bug ?? :p
  - redorb 9y ago
    The new acid test for browser compatibility
- erikpukinskis 9y ago
  This really drives home for me how powerful the web is in terms of graceful degradation.

forgot-my-pw 9y ago

I wonder how much time it took to code them.

jordigh 9y ago
Judging by her commit history, she started June 24 and the last commit is from two days ago. There are several commits for every month, at varying densities. So, this project has been continuously gestating for about 9 months. Here's probably most of the interesting raw data, extracted with Mercurial, in case someone else wants to do a visualisation of her workflow. http://paste.debian.net/1022858/ http://paste.debian.net/1022858/ There's some interesting stuff in the history. For example, at one point, the painting looked quite different. https://github.com/cyanharlow/purecss-francine/blob/519afdd7d44a980bf908f6a721adfce273cbff99/preview.jpg https://github.com/cyanharlow/purecss-francine/blob/519afdd7...

mortenjorck 9y ago

The way it breaks in older browsers is incredible, and far more diverse and interesting than I would have ever imagined. Chrome 17, Firefox 3.6, Chrome 9, IE 5.1.7 Mac: https://twitter.com/waxpancake/status/991412919656005632 https://twitter.com/waxpancake/status/991412919656005632 Opera Mobile: https://twitter.com/coreh/status/991395667720507393/photo/1 https://twitter.com/coreh/status/991395667720507393/photo/1 Opera (unspecified older version): https://twitter.com/dz/status/991365966553591808/photo/1 https://twitter.com/dz/status/991365966553591808/photo/1 IE 9 (my personal favorite): https://twitter.com/jamieparkinson/status/991329118267609088 https://twitter.com/jamieparkinson/status/991329118267609088

globuous 9y ago
They really look like Picasso versions, absolutely incredible !!! So cubism's kinda like a bug ?? :p
- redorb 9y ago
  The new acid test for browser compatibility
erikpukinskis 9y ago
This really drives home for me how powerful the web is in terms of graceful degradation.