36 ms·

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

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.html 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.

phaed 10y ago
You just blew my mind.
TeMPOraL 10y ago
> way to do this automatically is through adobe illustrator That explains quite a lot. CSS hacks just got a lot less impressive for me.
Freak_NL 10y ago
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.
- taneem 10y ago
  (he -> she)
  - Freak_NL 10y ago
    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.
    - roywiggins 10y ago
      I find "they" almost always works fine as a gender-free singular pronoun.
      - chronolitus 10y ago
        "it" "that thing" "the human" "this being"
        ahoy 10y ago
        "They" is a widely accepted gender-neutral (or unknown) pronoun, none of those things you typed are.
        roywiggins 10y ago
        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.
- b34r 10y ago
  Not entirely true, you can inline SVG in the data URI of a background-image declaration. It's kind of cheating, but absolutely works.

phaed 10y ago

You just blew my mind.

TeMPOraL 10y ago

> way to do this automatically is through adobe illustrator That explains quite a lot. CSS hacks just got a lot less impressive for me.

Freak_NL 10y ago

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.

taneem 10y ago
(he -> she)
- Freak_NL 10y ago
  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.
  - roywiggins 10y ago
    I find "they" almost always works fine as a gender-free singular pronoun.
    - chronolitus 10y ago
      "it" "that thing" "the human" "this being"
      - ahoy 10y ago
        "They" is a widely accepted gender-neutral (or unknown) pronoun, none of those things you typed are.
      - roywiggins 10y ago
        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.
b34r 10y ago
Not entirely true, you can inline SVG in the data URI of a background-image declaration. It's kind of cheating, but absolutely works.