Pure CSS

May 1, 2018 1:27 AM

Pure CSS Vignes, Zigario, and Francine are a series of projects where Diana Smith (GitHub) creates art using only CSS and HTML under the following constraints:

1. All elements must be typed out by hand
2. Only Atom text editor and Chrome Developer Tools allowed.
3. SVG use is limited, and all shapes can only use hand-plotted coordinates and bezier curves - without the aid of any graphics editor.

(best viewed in Chrome)
posted by juv3nal (31 comments total)

This is amazing. Where does she find the patience? I would ragequit this project before even opening the text editor.
posted by Literaryhero at 1:38 AM on May 1, 2018 [3 favorites]

Some horrifying/hilarious layering errors when viewed in Safari.
posted by ardgedee at 2:10 AM on May 1, 2018 [2 favorites]

OMG this is WOW
posted by unliteral at 2:32 AM on May 1, 2018 [1 favorite]

Looks fine in Firefox Nightly. (I haven't tried in Firefox release.)
posted by nnethercote at 3:10 AM on May 1, 2018 [1 favorite]

Zigario is super impressive. You can even see veins under the skin!
posted by tickingclock at 3:30 AM on May 1, 2018 [1 favorite]

The constraints seem a bit arbitrary - like, why not type it into Vim with a bent spoon? Snark aside, amazing work!
posted by pipeski at 3:42 AM on May 1, 2018 [1 favorite]

Impressive. I presume the next one will be a css drawing of herself, with a css drawing of shades getting lowered onto her face via javascript?
posted by mystyk at 4:02 AM on May 1, 2018

> nnethercote:
"Looks fine in Firefox Nightly. (I haven't tried in Firefox release.)"

It works fine in FF 59.03 x64.
posted by Samizdata at 4:09 AM on May 1, 2018 [1 favorite]

> The constraints seem a bit arbitrary

The effort involved can be trivialized by using a graphics editor (since Adobe Illustrator and such will output SVG format) or made much easier by utilities available online that will calculate gradients or paths. So to my ears being extremely specific about the tools and process has more to do with defining the boundaries between tool and shortcut, rather than what qualifies as the One True Editor and Browser. Personally I don't think "must be typed out by hand" should exclude use of copy-and-paste either, except inasmuch as Smith is only copying and editing text that had previously been typed by hand, but I don't know how strict she was about that particular rule.
posted by ardgedee at 4:11 AM on May 1, 2018

> ...shades getting lowered onto her face via javascript?

A simple straight-path animation with acceleration and deceleration is trivial in CSS these days. It'd actually require more work to do it in Javascript.
posted by ardgedee at 4:13 AM on May 1, 2018

(best viewed in Chrome)

Cool, it's 1998 all over again!
posted by tommasz at 6:30 AM on May 1, 2018 [2 favorites]

Given the complexity of the effects involved, it's impressive that there are so few cross-browser rendering differences.

(Anyway I kind of love Francine's horrifying robot eyeballs and the precious little dot on the tip of Zigario's nose. Busily digging through source to see if I can figure out which rules Safari is misinterpreting to render them that way)
posted by ook at 7:25 AM on May 1, 2018

Found it. Safari interprets the "transparent" keyword as transparent black, so the gradients have that weird gray tinge. Using rgba(255,255,255,0) instead would fix it.
posted by ook at 7:32 AM on May 1, 2018 [1 favorite]

Wow.

I get super excited if I make a different kind of bulletpoint or something.
posted by Artw at 7:36 AM on May 1, 2018 [3 favorites]

First I read the description and thought "oh these should be interesting."

Then I clicked the links and exclaimed "Oh dear God in Heaven WOW!"
posted by Uncle Ira at 8:12 AM on May 1, 2018 [1 favorite]

Samizdata: "It works fine in FF 59.03 x64."

The G in Zigario has a slightly visible box right where the horizontal and vertical meet at the angle of the G in Firefox 60; there's a similar but barely visible flaw in the V in Vignes. Otherwise Firefox and Chrome are rendering them identically.

Safari - Vignes looks fine, at first, but on closer inspection there are issues with layering (the pear renders under the strawberry, not over for example, and many of the shiny highlights are muted). Zigario gets the shape mostly right but the right arm looks like a hack job and the left cup is mangled. Plus, a weird gray dot on the nose. Francine fares better, aside from an oval on the shoulder, until you notice the rectangular eyes and then it gets creepy.

I was completely unprepared for it... but IE 11 does a better job of rendering these than Safari. Flower stems missing in Vignes; A in Zigario is in front of (rather than behind) the head, and the smoke is a block rather than blurred out; Francine looks mostly fine, aside from a bit of weird rendering on the left cheek.

Don't both Safari and Chrome use Webkit? Why the weird disconnect here?
posted by caution live frogs at 9:21 AM on May 1, 2018

Don't both Safari and Chrome use Webkit? Why the weird disconnect here?

I think that's only in iOS, not desktop versions of the browsers. In iOS, Safari, Chrome, and Firefox all render these pages poorly, but there are slight, subtle differences in how they make the mistakes.

FWIW, I help moderate a small Mac users forum. It's a VBulletin-based forum. In iOS, the moderation tools are somewhat broken in Safari but work well in both Chrome and Firefox, even though they are all WebKit-based browsers.
posted by Thorzdad at 9:40 AM on May 1, 2018 [1 favorite]

Lordy, you guys wouldn’t have liked the 00’s.
posted by Artw at 9:40 AM on May 1, 2018 [2 favorites]

Lordy, you guys wouldn’t have liked the 00’s.

Yeah. When I saw "best viewed in Chrome," I immediately had nasty flashbacks to "made for Internet Explorer" or "best viewed in Internet Explorer" websites.
posted by Thorzdad at 9:43 AM on May 1, 2018

> Don't both Safari and Chrome use Webkit? Why the weird disconnect here?

In 2013 Google forked WebKit and called it Blink. Your desktop and Android Chrome browsers haven't used WebKit for almost five years now. iOS Chrome browser continues to be built on WebKit because of Apple's contractual app requirements.
posted by ardgedee at 9:55 AM on May 1, 2018

To anyone complaining about the "Best Viewed in Chrome" bit, that's typically because Chrome is often ahead of other browsers when implementing web standards, and not because of any nefarious attempt at lock-in that were the hallmark of the Browser Wars of the late 90's. And as others have noted, Firefox does a pretty decent job of rendering it as well. If you're going to push the limits of the web platform like this, it makes sense that the browser that supports the most advanced features of that platform is going to do better.
posted by Aleyn at 12:59 PM on May 1, 2018 [2 favorites]

Holy crap.

This is a stunningly inefficient way to create these images. Which is also entirely the point.

I am pretty sure this woman now knows more about weird corners of CSS than, like, anyone who knows what CSS is and hasn't been involved with actually making a browser implement the standard correctly.
posted by egypturnash at 1:25 PM on May 1, 2018 [1 favorite]

Maybe Rachel Nabors.
posted by Artw at 1:47 PM on May 1, 2018

(Safari is a garbage browser, from my perspective as someone who has to do much simpler CSS than this for a living, at times.)

These are really impressive. FF on windows renders them very well.
posted by maxwelton at 3:00 PM on May 1, 2018 [1 favorite]

(I literally think of Safari as the new IE8. Time to book another therapy session.)
posted by maxwelton at 3:01 PM on May 1, 2018 [1 favorite]

Desktop is pretty even these days, unless you're doing really far out stuff like this. All my painpoints have gone to mobile, and what realyy sucks there is it's often gone from dealing with different browser to dealing with individual *phones*.
posted by Artw at 3:07 PM on May 1, 2018 [2 favorites]

These even render pleasantly (if not entirely accurately) when printed. In awe.
posted by scruss at 5:56 AM on May 2, 2018 [1 favorite]

→ Chrome is often ahead of other browsers when implementing web standards, and not because of any nefarious attempt at lock-in

Try using Google Meet on anything but Chrome tho: Meet doesn't work on your browser
posted by scruss at 5:59 AM on May 2, 2018

I've been impressed in general with the new Firefox Quantum engine, it's quite good and a major improvement over the older Gecko.

What shocked me was that the Trident engine in IE11 performed as well as it did - given that I tested it on Windows7, I'd pretty much been convinced that Microsoft had abandoned it in favor of Edge and expected it to suck at anything cutting edge. Who knew?

Also, I wouldn't trust Google's judgement on "doesn't work on your browser" after finding out that they intentionally crippled copy-paste on non-Chrome browsers for Google Sheets... since rolled back, but for a while there Firefox users had to use the menu option to copy and paste cells rather than cmd/ctrl+C and cmd/ctrl+V. Entirely artificial thing designed to push people to use Chrome. I have Chrome installed, but really only ever open it to test things. Firefox for life, yo.
posted by caution live frogs at 9:11 AM on May 2, 2018

Try using Google Meet on anything but Chrome tho

Perhaps, but I'm not talking about Google Meet, I'm talking about the subject of the post. I'm not giving people a blanket excuse to make their sites inaccessible to other browsers, I'm explaining why, in the case of what is essentially a tech demo, the criticism isn't warranted. For anyone trying to make a site that has a use outside of tech demos that puts up unnecessary roadblocks towards making it accessible to other browsers (and that includes Google doing any intentional crippling of their products in non-Chrome), they deserve all the scorn you can muster.
posted by Aleyn at 5:16 PM on May 2, 2018

(aside from the fact that the "Best Viewed in Chrome" statement for the demos is simply advisory in the first place; you can still actually look at it in whatever browser you choose)
posted by Aleyn at 5:18 PM on May 2, 2018