
A Single Div - duck
http://a.singlediv.com/
======
derefr
The thing I'm always surprised about with these sort of CSS hacks: they don't
lag my browser. Like, at all. Even the animated ones! Which is really
surprising when you compare them to literally any other way these
illustrations could have been created. A sufficient mess of procedural
Javascript to render the same designs would lag horribly. The equivalent Flash
would make the browser choppy as all hell. As would a Java applet, if those
were even still around. (SVG might not, but for the SVG to animate you'd need
to use... CSS.)

Is CSS effectively "free", or is this just not a complex-enough example to
start to see problems?

~~~
kevinwang
I definitely had performance issues when I tried taking CSS hacks to the
extreme: [http://vitamintk.github.io/One-div-
pics/](http://vitamintk.github.io/One-div-pics/)

~~~
13of40
Renders fine on a $99 Windows phone. Crashes the browser on my iPad. The world
is a funny place.

~~~
tamana
That's a software difference, software doesn't care bow.much your hardware
costs.

~~~
13of40
I suspect my iPad crashes (all the damned time) because it's running a couple
dozen services that take up all the RAM. Not that the Windows phone isn't, but
it seems to manage them a bit better.

------
throwaway13337
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...](https://helpx.adobe.com/illustrator/using/css-
extraction.html)

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.

~~~
Freak_NL
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
(he -> she)

~~~
Freak_NL
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
I find "they" almost always works fine as a gender-free singular pronoun.

~~~
chronolitus
"it"

"that thing"

"the human"

"this being"

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

------
schneidmaster
Sometimes I like to look at sites like these in IE6 (through BrowserStack) --
not because I expect them to support it, of course; just because it's
fascinating to see how far CSS has come. This one is particularly amusing
given how rich it looks in any modern browser.
[http://i.imgur.com/zGycgtH.jpg](http://i.imgur.com/zGycgtH.jpg)

~~~
milcron
Reminds me of the old browser acid tests.

~~~
schneidmaster
> Microsoft said that Acid3 did not agree with the goal of Internet Explorer 8
> and that IE8 would improve only some of the standards being tested by Acid3.
> IE8 scored 20/100, which is much worse than all relevant competitors at the
> time of Acid3's release, and had some problems with rendering the Acid3 test
> page. On 18 November 2009, the Internet Explorer team posted a blog entry
> about the early development of Internet Explorer 9 from the PDC
> presentation, showing that an internal build of the browser could score
> 32/100.

Ah, memories.
[https://en.wikipedia.org/wiki/Acid3](https://en.wikipedia.org/wiki/Acid3)

~~~
cormacrelf
Hm, Safari latest doesn't actually pass Acid3. It crashes Safari Web Content
every time, and gets to max 97/100\. Should we be worried?

~~~
drostie
IE and Edge never actually "passed" Acid3 either; as I recall they typically
got to scores of 100 but would lag on two numbers, I want to say they were 25
and 69, whereas the test explicitly says that the animation needs to be fluid.

~~~
creshal
Does any browser pass, then? Current Chrome and Firefox both lag on 69 for me.

~~~
jandrese
I got Firefox 47.0.1 to pass with 100%, but only when I reloaded the page. It
failed the first time with only 99/100\. Passing may require a very fast
internet connection or cached data.

------
javierbyte
We had a contest at the office, the challenge was to create the most complex
illustration with css and a single div, so I created
[http://javier.xyz/img2css/](http://javier.xyz/img2css/) (I have to admit that
is not as fun nor interesting to create 'single divs' with img2css).

------
rawnlq
Just wondering, is there still any legitimate reason for doing this over using
something like svg?

Or is it mostly to show off in the same spirit as obfuscated C contests or
demo scenes?

~~~
gkoberger
It's definitely just showing off what you can do with a single div and CSS,
much like your latter examples. It's an experiment in constraints.

However, I could see something like this being useful in the case where you're
using a third-party site and are only allowed to edit CSS. You probably don't
need something as complicated as a cross-stitched heart, however it does show
some techniques for squeezing as much in as possible.

It also could be useful for a Font-Awesome-style icon set, where you just type
<i class="icon-flower"></i>, although I imagine most people would prefer to
just do something like <img src="/flower.svg">.

~~~
derefr
Personally, I'd prefer

    
    
        .icon-flower:before {
          content: url(/flower.svg);
        }
    

—which would effectively treat the SVG not as an image or background or
anything, but rather as a character glyph from a synthesized single-character
_graphical-emoji font_ —meaning your SVG design would be display:inline'd at
the current font-size, including font-styles (oldschool faux-italics) and
text-decorations (properly-positioned and shaped underline/outline drawn
before the SVG glyph's stroke.)

The text engine is already incredibly expressive for doing arbitrary vector-
glyph layout; so if you're creating your _own_ one-off vector glyphs, why
shouldn't you be allowed to manipulate them using the text engine?

~~~
manmal
That's an option if you want your icon monocolored, but else you'll need the
other options. Or, if you want a responsive icon, you'll need the pure CSS
approach AFAIK.

~~~
minitech
What is a "responsive icon"? Keep in mind that you can just switch the path to
the SVG in CSS in the same way that you'd alter properties of a CSS image.

~~~
helb
[http://www.responsiveicons.co.uk/](http://www.responsiveicons.co.uk/)

------
Freak_NL
Here is another collection of such single-div experiments:

[https://github.com/ManrajGrover/SingleDivProject](https://github.com/ManrajGrover/SingleDivProject)

(I have contributed a handful myself)

~~~
odabaxok
Why would not you put live demos there (instead of the gifs and pngs)?

~~~
minitech
You can't put arbitrary CSS in GitHub readmes.

~~~
odabaxok
Ohh.. I was not aware of that, thanks for the explanation.

------
jswny
Yes, SVG files have come a long way and are quite useful for this type of
vector graphics. However there is something so satisfying about knowing that
your vector art fits into a single div and comes purely from CSS. Amazing
work. These are really visually appealing to me. Soft and welcoming, yet
vibrant.

~~~
wingerlang
I'm on the opposite side. With all the quirks of CSS, all I can think is: "I
wonder how it looks in browser X".

~~~
ygra
Most of these do not much more than layering gradients via multiple background
declarations. That gives browser developers very little room to screw up if
gradients and multiple backgrounds work correctly.

It still remains a hack, of course and I guess there is little use of the
technique apart from curiosity and fun.

~~~
myfonj
In reality, that layering gradients via multiple backgrounds has still many
quirks across current browsers: different pixel rounding errors, different
blend modes often produces visually incoherent results - seams, gaps and
aliasing [1].

One amusing quip: recently I have been messing with CSS3, tried the most
simple use-case for `radial-gradient` I could imagine and immediately ran into
Chrome bug [2] not reported at the time. I think it is somewhat illustrative.

[1] Look for example at
[http://codepen.io/myf/pen/Bzmmry](http://codepen.io/myf/pen/Bzmmry) in Chrome
and Firefox. [2]
[https://bugs.chromium.org/p/chromium/issues/detail?id=623714](https://bugs.chromium.org/p/chromium/issues/detail?id=623714)

------
Trufa
Regardless of the usefulness or practicality of this, the art is really
captivating, I really like the style.

------
webXL
So much good stuff here (toggling Mickey's :after border-radius is my
favorite), but the title is a tad bit misleading, since the ::before and
::after pseudo-elements really act as divs.

[https://www.w3.org/TR/selectors/#pseudo-
elements](https://www.w3.org/TR/selectors/#pseudo-elements):

> Note: A future version of this specification may allow multiple pseudo-
> elements per selector.

Oh, please, please, please!

~~~
Freak_NL
I really like how some of these make you think about how she did it. The
Mickey is so clever with the _box-shadow_ and the _border-radius_ on the
::after.

------
c-smile
While ago I've proposed at W3C CSS WG so called vector images ( see:
[http://sciter.com/lightweight-inline-vector-images-in-
sciter...](http://sciter.com/lightweight-inline-vector-images-in-sciter/) ).

With them, without any hacks like those you can define arbitrary shapes in CSS
and in <img src="...">:

    
    
        div {
          background-image: url(path:c 50,0 50,100 100,100 c 50,0 50,-100 100,-100);
          background-repeat: no-repeat;
        }
    

Symbols on the right of path: are the same that appear in SVGs path d
attribute:

    
    
        <path d="c 50,0 50,100 100,100 c 50,0 50,-100 100,-100" fill="#000" />
    

But in significantly more lightweight manner.

Proposal did not go through. Nobody cares, sigh. So people keep hacking
gradients with CSS.

~~~
ihuman
At that point, why not just use an svg file?

~~~
c-smile
1\. Each DOM element is about 200-400 bytes (YMMV) in memory. You will need at
least two of those. So to parse that SVG and build DOM structure.

2\. Yet just to get that file over HTTP you will need to execute around 40,000
machine instructions. You can use data URLs to encode your SVG but that looks
even more uglier.

3\. With such path images you can write:

    
    
        button { background-image: url(path: ...);
                 fill: blue;  }
        button:hover { 
                 fill: red;  }
    

With SVG you cannot do that - each SVG is a standalone document. So you will
need two such images, see #1 and #2 above.

4\. And one more: CSS needs the way to define arbitrary shapes :
[https://www.w3.org/TR/css-shapes-1/#supported-basic-
shapes](https://www.w3.org/TR/css-shapes-1/#supported-basic-shapes) . Ugly and
far from complete set. Why not proven construct that we already have WYSIWYG
tools for editing?

That if to look on the problem as a whole ... But CSS is split on modules
these days. Each module have their own authors that do whatever is more
convenient for them. Christmas tree design, sigh.

~~~
jakobegger
Re 3: You can use CSS to change the color of inline SVG on hover. I used this
trick for the download button on
[https://eggerapps.at/postico/](https://eggerapps.at/postico/)

~~~
c-smile
Nothing happens in Chrome and FF on hover of that button.

~~~
minitech
On that website, the styles are on :active (press and hold). It does need the
SVGs to be inline with <svg>, though, which isn't great.

------
NeliusKnight
So were these created with straight CSS the way I'm believing it to be, or
using a program from adobe?

~~~
Freak_NL
I don't think that there are programs that generate CSS within this particular
constraint of one div. This is more akin to _code golf_ , where you attempt to
push the boundaries of what is possible within a strict set of limits.

More information is available here:

[https://github.com/lynnandtonic/a-single-
div](https://github.com/lynnandtonic/a-single-div)

------
seanhandley
Lynn's talk at CSS Day is well worth 30 minutes of your time:
[https://www.youtube.com/watch?v=I_QKNCn_m_g](https://www.youtube.com/watch?v=I_QKNCn_m_g)

------
HugoDaniel
Perhaps this is the equivalent of the css zen garden[0] for modern CSS ? :D

[0][http://csszengarden.com/](http://csszengarden.com/)

------
shultays

        <div id="zipper" class="entry">
          <div></div>
        </div>
    

why is this a thing? what is with empty div? is it necessary?

~~~
stevehb
It looks like use them for CSS properties. The background for the outer div is
set to #4e6590, the blue background. The background-image of the inner div
(and its ::before and ::after) draw the parts of the zipper.

For example, the inner div has background-image of

    
    
        linear-gradient(to top, transparent 10px, #aaa 10px, #aaa 15px, #ccc 15px, #ccc 30px, transparent 30px), repeating-linear-gradient(to bottom, transparent, transparent 5px, #ddd 5px, #ddd 10px), repeating-linear-gradient(to bottom, #ccc, #ccc 5px, transparent 5px, transparent 10px);
    

which draws the teeth of the zipper.

------
rjcaricio
A while ago I was looking into the things in this site and I created this
Plugin to help me inspecting how it is done:
[https://github.com/rafaelcaricio/gradient-
inspector](https://github.com/rafaelcaricio/gradient-inspector)

May help you too!

------
cloudjacker
Web development looking fun again now that Internet Explorer is out of the
picture

------
jlebrech
I'd love a UI entirely run by css, just the one div like this.

------
sdneirf
Nice! Great performance on Chrome.

------
duke360
WOW, that's beautiful!

------
katzgrau
I dig, very much. That's all I've got.

