Hacker News Reader

Comment by throwaway13337 | Hacker News Reader

CSS can be used to draw arbitrary vector images mostly via the background style.

Probably the easiest way to do this automatically is through adobe illustrator. You can convert an arbitrary file to CSS:

https://helpx.adobe.com/illustrator/using/css-extraction.htm...

I guess a lot of people think it's neat in a 'web-hack' sort of way, but it's just another way to express the same thing.

Pay no attention to the man behind the curtain.

View on HN

That is not what the author of A Single Div is doing! In CSS you cannot add arbitrary vector drawings to a single div without linking to an image resource as background (SVG in that case).

What the author is doing is using the single div and its two pseudo elements before and after (so effectively the author has three elements to work with) and style the borders, border-radius, background, shadow, text-content, etc. The use of linear-gradient declarations on the background in particular is a big part of a lot of these drawings, because you can add an arbitrary number of them on any element. Look at the Tardis sample in your element inspector and toggle the background of the div; you will see that most of the door panelling and windows disappear. These are drawn with linear gradients where the colours don't blend into each other, but stop abruptly. By layering these 'gradients', you can create patterns, such as cross hatching or a grid of lines.

Some of these are actually really clever.

(he -> she)

Edited. I usually omit he or she if I don't know the gender of the person referred to. I used he in that byline (I used the author in the main phrases) as the generic pronoun (i.e., any author of such a single-div experiment), but that may not have been clear from the context.

I find "they" almost always works fine as a gender-free singular pronoun.

"it"

"that thing"

"the human"

"this being"

"They" is a widely accepted gender-neutral (or unknown) pronoun, none of those things you typed are.

Only the first one is a pronoun, and it's one generally reserved for nonhumans.

I'm sure there are people out there happy to be called 'it' (or even prefer 'it' over other pronouns) but not very many. 'They' seems much more neutral to me.

Not entirely true, you can inline SVG in the data URI of a background-image declaration. It's kind of cheating, but absolutely works.

> way to do this automatically is through adobe illustrator

That explains quite a lot.

CSS hacks just got a lot less impressive for me.

You just blew my mind.

Reply on news.ycombinator.com