11 ms·

Painting made out of CSS rules

185 points by jordigh 9y ago

hartator 9y ago
This is purely awesome: https://imgur.com/a/fiK8B1f https://imgur.com/a/fiK8B1f
jordigh 9y ago
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.
elliottkember 9y ago
The most fun I've ever had in the web inspector https://imgur.com/a/KKj82eZ https://imgur.com/a/KKj82eZ
- jtlowe 9y ago
  That is awesome!
- chimen 9y ago
  I was expecting something a little more...technical. Awesome! I really laughed at this.
vadansky 9y ago
Now I feel stupid for thinking I need a wacom tablet to draw properly
- jordigh 9y ago
  Don't feel that way. She probably has used a wacom tablet or similar. She wasn't born knowing how to do this. She worked hard and probably used tools to help her get to the point where she can make this. Now her effort has paid off and now she can work without those tools. No master is born being able to work a challenge with self-imposed rules without first working up to that challenge without the restrictions.
pathartl 9y ago
From one of the other ones because I was bored https://i.imgur.com/V9porZ6.gifv https://i.imgur.com/V9porZ6.gifv
tomtimtall 9y ago
It’s funny how the human brain works. I was prepared to be amazed yet the very first thoughts through my mind was literally: “her eyes look wonky, her left eye is bleeding, her ears are really odd”. Only then did I even notice the rest of the picture and think “This is actually really impressive for pure css”.
tejasmanohar 9y ago
Wow! It'd be hilariously impressive if someone wrote something like an image tracer [0] that outputted CSS. Not useful at all (AFAICT) but would be a cool project. [0]: https://en.wikipedia.org/wiki/Image_tracing https://en.wikipedia.org/wiki/Image_tracing
rhcom2 9y ago
Wow super impressive. I wonder how long it took.
crashride 9y ago
Not trying to rain on his/her parade, they're definitively cool and well done. But "CSS only" used to mean super hacky things that CSS wasn't supposed to be able to do but at this point it's basically the same rendering engine under the covers as SVG.
- suyash 9y ago
  Agree, this is cool trickery but from real world use case, waste of time and effort. I don't see any advantage that pure CSS brings out for such art work. Cool demo nevertheless.
suyash 9y ago
Doesn't loadup in Safari.
civilian 9y ago
I found an easter egg or a WIP! There's an item with `display: none` on it. :]
lsh 9y ago
Doesn't look like anything to me ... Seriously - in latest Vivaldi it's so large that even zooming out the furthest (20%) I can't make out anything. The static images from the glitched browsers in the comments above are great though.
strainer 9y ago
Considering the curious shades and strokes, expression and fashion sculpted meticulously on this awkward medium, the image herself is quite mesmerising.
digi_owl 9y ago
Clever. But scrolling any of the images gave my old computer fits...

185 points by jordigh 9y ago

This is purely awesome: https://imgur.com/a/fiK8B1f https://imgur.com/a/fiK8B1f

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.

elliottkember 9y ago

The most fun I've ever had in the web inspector https://imgur.com/a/KKj82eZ https://imgur.com/a/KKj82eZ

jtlowe 9y ago
That is awesome!
chimen 9y ago
I was expecting something a little more...technical. Awesome! I really laughed at this.

vadansky 9y ago

Now I feel stupid for thinking I need a wacom tablet to draw properly

jordigh 9y ago
Don't feel that way. She probably has used a wacom tablet or similar. She wasn't born knowing how to do this. She worked hard and probably used tools to help her get to the point where she can make this. Now her effort has paid off and now she can work without those tools. No master is born being able to work a challenge with self-imposed rules without first working up to that challenge without the restrictions.

pathartl 9y ago

From one of the other ones because I was bored https://i.imgur.com/V9porZ6.gifv https://i.imgur.com/V9porZ6.gifv

tomtimtall 9y ago

It’s funny how the human brain works. I was prepared to be amazed yet the very first thoughts through my mind was literally: “her eyes look wonky, her left eye is bleeding, her ears are really odd”. Only then did I even notice the rest of the picture and think “This is actually really impressive for pure css”.

tejasmanohar 9y ago

Wow! It'd be hilariously impressive if someone wrote something like an image tracer [0] that outputted CSS. Not useful at all (AFAICT) but would be a cool project. [0]: https://en.wikipedia.org/wiki/Image_tracing https://en.wikipedia.org/wiki/Image_tracing

rhcom2 9y ago

Wow super impressive. I wonder how long it took.

crashride 9y ago

Not trying to rain on his/her parade, they're definitively cool and well done. But "CSS only" used to mean super hacky things that CSS wasn't supposed to be able to do but at this point it's basically the same rendering engine under the covers as SVG.

suyash 9y ago
Agree, this is cool trickery but from real world use case, waste of time and effort. I don't see any advantage that pure CSS brings out for such art work. Cool demo nevertheless.

suyash 9y ago

Doesn't loadup in Safari.

civilian 9y ago

I found an easter egg or a WIP! There's an item with `display: none` on it. :]

lsh 9y ago

Doesn't look like anything to me ... Seriously - in latest Vivaldi it's so large that even zooming out the furthest (20%) I can't make out anything. The static images from the glitched browsers in the comments above are great though.

strainer 9y ago

Considering the curious shades and strokes, expression and fashion sculpted meticulously on this awkward medium, the image herself is quite mesmerising.

digi_owl 9y ago

Clever. But scrolling any of the images gave my old computer fits...