
A Single Div - brbcoding
http://a.singlediv.com/
======
anateus
I haven't seen so much nay-saying on HN in a while. It's like because there's
an artistic element this or it's pure-web tech the appreciation of a cool hack
and interesting exploration of a technology is completely gone. This is a
classic example of a "hack", pushing CSS slightly beyond what it was intended
for and potentially what is practical.

But it's beautiful and clever, and if you truly can't appreciate it, that's
sad.

~~~
_pmf_
> But it's beautiful and clever, and if you truly can't appreciate it, that's
> sad.

Interesting. Is it as sad as the fact that one still cannot vertically center
a div in CSS without using elaborate hacks?

~~~
thangalin
I believe Flexbox, which is supported by most major browsers, allows
vertically centering content without hacks:

[http://philipwalton.github.io/solved-by-
flexbox/demos/vertic...](http://philipwalton.github.io/solved-by-
flexbox/demos/vertical-centering/)

~~~
alexjeffrey
[http://caniuse.com/#feat=flexbox](http://caniuse.com/#feat=flexbox)

Until most IE users upgrade to 11, it's not usable by those of us who can't
exclude a large chunk of our users.

~~~
khc
has caniuse.com replaced quirksmode now as the canonical source of this kind
of information?

~~~
masklinn
caniuse.com provides broad outlines, quirksmode is much more specific and PPK
hasn't really worked on the new non-mobile stuff so far, as far as I've seen.
Nothing on flexbox for instance, although he does have box-sizing: padding-
box.

caniuse is good for "is there a chance this will work?" or "could I use
$some_feature in my new project?", quirksmode is "why doesn't my use of
$some_feature work in $pile_of_shit_browser?!?!?!!!"

------
justhw
For those who don't understand. Each image is not in fact an image, it's css
styles applied to a single html element. Very impressive.

[http://i.imgur.com/V8HYrhK.png](http://i.imgur.com/V8HYrhK.png)

~~~
oliverwgarcia
It's amazing how powerful css is. I recently worked with changing the
checkboxes on a form of mine to look like the iOS7 toggle. Check it out:
[http://designcouch.com/home/why/2013/09/19/ios7-style-
pure-c...](http://designcouch.com/home/why/2013/09/19/ios7-style-pure-css-
toggle/)

~~~
Tloewald
It's amazing how CSS lets you do stuff like this but still can't center things
easily.

Nice demo by the way, but why on earth did you use an id rather than a class?

~~~
masklinn
> It's amazing how CSS lets you do stuff like this but still can't center
> things easily.

It's trivial to do if you can use flexbox. And I do mean _trivial_ , we're
talking 3 properties including "opting into" flexbox:
[http://jsfiddle.net/1vd9xLdy/](http://jsfiddle.net/1vd9xLdy/) (note: didn't
bother with prefixes or older syntaxes so IE >= 11, Firefox >= 28, Chrome >=
29, Opera 12.1 or >= 19)

~~~
Tloewald
It's not vertically centered in the _window_ , and that's using a CSS feature
that's only fully-supported in IE11. This trickery is all box shadows and
border radii, which go back to IE8.

Flex box is great, but it's interesting that CSS implemented gaussian blurred
inset shadows and 3d transforms before it addressed centering (incompletely).

------
rtorr
If you read [https://github.com/lynnandtonic/a-single-div/blob/gh-
pages/R...](https://github.com/lynnandtonic/a-single-div/blob/gh-
pages/README.md#but-but), she obviously knows this is not the most practical
way to make illustrations. Maybe its for fun and research? Some harsh people
on here today.

------
disillusioned
What shitty fucking whiners you lot are. This is a fun technical experiment.
It's clearly not advocating for some sort of production environment usage of
pure CSS/single-div imagery in lieu of SVGs. It's a mental challenge and a fun
"I wonder if" experiment.

Any of you busily shouting high from the mountaintops how this is useless and
pointless and stupid and derf, don'tyouknowthisisn'tpractical should stop well
short of daring to call yourselves engineers, and even shorter of calling
yourselves creators, for a key tenet of a great engineer is occasionally
looking at absurd challenges and seeing if they can make something happen.

I'm glad most of this trash has since been downvoted into oblivion where it
belongs.

~~~
ZoFreX
Counterpoint to "not practical": We have a dashboard at work that displays,
amongst other things, the CI build status. For reasons I won't go into, we
cannot change the HTML. We can change the CSS though, using Stylish. The
"build failed" / "build succeeded" icons were incredibly non-obvious and
developers weren't paying much attention to them.

Now, through a series of seriously horrendous CSS hacks, they display as
really nice flat design green checks and crosses. Given that this dashboard
only ever displays in literally one browser, on one big screen, it was
completely acceptable to use CSS hacks to achieve the look I wanted.

It was sites such as this one that helped me figure out how to twist a single
HTML element into what I needed. Particular shout-out to
[http://nicolasgallagher.com/pure-css-gui-
icons/demo/](http://nicolasgallagher.com/pure-css-gui-icons/demo/)

------
blt
I am unmoved by the many "... in pure CSS" posts, but I guess they are the
equivalent of "HTTP server in x86 assembly" for CSS designers.

~~~
errantspark
I like this, it's neat art. However I must agree that I'm unmoved, I invite
anyone who thinks this is particularly clever to visit www.pouet.net for a bit
of re-calibration.

It's all relative.

~~~
ben336
looked at pouet.net. Not sure what I'm supposed to be seeing?

~~~
errantspark
Ok fair point I shouldn't have been so glib as puet is pretty horrible from a
web design standpoint.

It's a website for the demoscene, where people do stuff like this
[https://www.youtube.com/watch?v=wqu_IpkOYBg](https://www.youtube.com/watch?v=wqu_IpkOYBg)
in 177 kilobytes.

~~~
comrh
They do that complete render in 177kb...? I remember crack intros but that's
insane. Is this in C?

~~~
lloeki
I don't get the fascination with Farbrausch. While I respect and admire the
feat which I'm unable to pull of myself, there are comparatively much better
realisations both in terms of art and technique. See the following 64k demos:

\- chaos theory -
[https://www.youtube.com/watch?v=ZfuierUvx1A](https://www.youtube.com/watch?v=ZfuierUvx1A)

\- turtles all the way down - sub dream
[https://www.youtube.com/watch?v=z48t2R2hEJM](https://www.youtube.com/watch?v=z48t2R2hEJM)

\- the timeless —
[https://www.youtube.com/watch?v=lwFVlNytq0Q](https://www.youtube.com/watch?v=lwFVlNytq0Q)

\- turtles all the way down - brain control -
[https://www.youtube.com/watch?v=sBKmqkh9bb8](https://www.youtube.com/watch?v=sBKmqkh9bb8)

~~~
Eiriksmal
Rewatching those reminded me of how phenomenal Demovibes 9 is:
[http://www.demovibes.org/dv_info.htm](http://www.demovibes.org/dv_info.htm)

As far as the Farbrausch comment, I think the appeal of Debris, in particular,
is the stunning audio component of the demo. Chaos Theory is beautiful, but
the audio/video components don't feel as tightly integrated as some of
Farbrausch's work.

------
grimmfang
These are really impressive. Are you using a program to compile these to CSS
or are you just a wizard?

------
MalcolmDiggs
Interesting to see CSS coming into it's own. Sure it's not the most practical
thing at the moment, but I could certainly see some smaller-scale uses being
useful today (like iconography and such).

Makes me wonder if we'll begin to see icon/image libraries released with pure
css versions.

~~~
smt88
Considering PNG has been around since 1996 and HTML pages can load arbitrary
images and fonts, we don't need pure CSS icons. We have purpose-built formats
for images. This CSS image project is just for fun.

The whole "[something] in pure CSS" began when people realized how awful
table-based layouts are. First it was layouts, then full-blown designs.

This is almost like the most extreme version of that trend, almost to the
point of parody.

~~~
gpvos
While that may be true for this site, I do think CSS could be very useful for
icons, since the it's infinitely zoomable, and a PNG isn't.

~~~
Nullabillity
SVG? Vectorized, far better browser support than advanced CSS, advanced
WYSIWYG editor support.

~~~
gpvos
SVG is another obvious contender, but it needs a separate file (or a cryptic
data url), which is not always a disadvantage, but sometimes may be.

It seems like CSS has many of the same possibilities as SVG, although
expressed a bit more obscurely. But I can imagine that an SVG-to-CSS converter
would be possible.

------
infinitivium
Would love to see a blog post detailing some of these techniques.

~~~
jfoutz
looks like the big trick is rendering to the background image:

    
    
        #mario-mushroom div {
          width: 170px;
          height: 140px;
          margin-left: -85px;
          margin-top: -90px;
          background-image: radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%), linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%), radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%), radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%), linear-gradient(to bottom, #ef0015 20%, #b2000c 100%);
          border-radius: 140px 140px 80px 80px;
        }

~~~
jtheory
Different gradients (sometimes linear, sometimes radial), and/or box-shadow
rules like this:

    
    
      #camera div:after {
        width: 100px;
        height: 100px;
        margin-left: -20px;
        top: 15px;
        left: 50%;
        z-index: 3;
        background: linear-gradient(45deg, #ccc 40%, #ddd 100%);
        border-radius: 50%;
        box-shadow: 0 3px 2px #999, 1px -2px 0 white, -1px -3px 2px #555, 0 0 0 15px #c2c2c2, 0 -2px 0 15px white, -2px -5px 1px 17px #666, 0 10px 10px 15px rgba(0,0,0,0.3), -90px -51px 1px -43px #aaa, -90px -50px 1px -40px #888, -90px -51px 0 -34px #ccc, -90px -50px 0 -30px #aaa, -90px -48px 1px -28px rgba(0,0,0,0.2), -124px -73px 1px -48px #eee, -125px -72px 0 -46px #666, -85px -73px 1px -48px #eee, -86px -72px 0 -46px #666, 42px -82px 1px -48px #eee, 41px -81px 0 -46px #777, 67px -73px 1px -48px #eee, 66px -72px 0 -46px #666, -46px -86px 1px -45px #444, -44px -87px 0 -38px #333, -44px -86px 0 -37px #ccc, -44px -85px 0 -34px #999, 14px -89px 1px -48px #eee, 12px -84px 1px -48px #999, 23px -85px 0 -47px #444, 23px -87px 0 -46px #888;
      }
    

Neat results -- I'm not sure how practical these specific techniques are to
everyday development, but of course a project like this provides the creator
with a strong motivation to seriously master everything available in CSS; and
the end result of that has obvious practical use.

------
jianshen
This was really fun challenging myself not to look at the source and thinking
thru how I would do each one myself. Things are not as hierarchical as you
might expect. Great job!

------
elwell
Relevant: [http://pattle.github.io/simpsons-in-
css/](http://pattle.github.io/simpsons-in-css/)

------
dinkumthinkum
I'm surprised at the comments. To the person that did this: Great job! This is
very neat and shows the kind of boundaries you can push with CSS. So what if
this is not practical per se, it does show that you can potentially do simpler
things than this in pure CSS and that may, in fact, be practical in some
cases. Seeing an example like this makes it abundantly clear that that simple
of effect you might be wondering if is possible to do in CSS is definitely
because clearly this exists.

Besides that, this is HackerNews; it's relevant.

------
shaurz
And still less verbose than SVG.

------
marpstar
Very cool. Kind of funny if you open it in something old, like IE9, just to
see. Some of them are close, but none of them work 100%. Kind of like failing
the old Acid test.

------
n0rm
This is wizardry.

------
kelvin0
Could someone please enlighten me as to what I am looking at? The images are
nice, and ...?

~~~
tux3
That's clever. It didn't even slow done my modest laptop.

~~~
kelvin0
So would it be possible to have an SVG ==> CSS exporter which would lighten
the load on most browsers? Is there always a performance 'gain' in using CSS?

------
pattle
This is pretty cool, the attention to detail is great. I did something similar
a while ago - [http://pattle.github.io/simpsons-in-
css](http://pattle.github.io/simpsons-in-css)

Don't let the SVG naysayers get you down. Yes SVG would have been a better
tool for the job but its not about that, its about pushing CSS to it's a
limits and that what you've done. This is an awesome hack!

------
prasath5s
Awesome!!! This is absolute Hacking!!!

------
skalla
Open this on Internet Explorer LOL! Try from IE6 until IE 11. You can watch
the evolution of SingleDiv

------
penguindev
maybe this will actually work in more browsers than svgs do. I tried about 15
inkscape-made svgs the other days, really simple clipart, and out of 3
(current!) browsers most of them rendered differently :-( One svg was
different in all 3 :-(

------
okaka
Tested

IE9 is not fully supported. And doesn't support IE8 and below.

But It's still wonderful.

~~~
nobodyshere
That's not necessarily a drawback.

------
Kiro
How do they create two eyes out of one :after in the mushroom?

~~~
anteht
By using multiple box-shadows.

    
    
      box-shadow: 8px 0 #312114, 38px 0 #312114;

------
secutor
What happens if you turn the web standards and css time back on this:
[https://twitter.com/secutor/status/504591841447399424](https://twitter.com/secutor/status/504591841447399424)
Amazingly pictures how hard it is to develop anything cross IE platform...

~~~
talmand
I fail to see your point. I don't understand what these clever uses of CSS
that may or may not be used in a production environment has to do with old IE
development. It would be like complaining that developing the film from a
digital camera shows the pain of painting realistic images onto canvas.

------
jokoon
shouldn't SVG be more relevant for this ?

------
cseelus
Artsy!

------
obasa
Can't believe this.

------
littleyangqh
Only CSS? cool

------
collyw
I saw 19 divs when I clicked on view source.

~~~
collyw
A bit of context would be nice. I gather from the comments this is some neat
css hack. Without that, I had no idea what the page is about.

------
icalc
Great work.

------
shmerl
What is the point of doing that instead of using SVG?

~~~
dpeck
you're not allowed to ask that these days, we have to celebrate using inferior
means for the sake of doing so.

~~~
shmerl
The author commented:
[https://twitter.com/lynnandtonic/status/504378544349126656](https://twitter.com/lynnandtonic/status/504378544349126656)

 _> Don't worry folks, I do know what SVG is. ;)_

------
jastanton
<google-maps></google-maps>

boom. see more here: [http://www.polymer-project.org/components/paper-
elements/dem...](http://www.polymer-project.org/components/paper-
elements/demo.html)

------
Pxtl
Making images in css is like making a game engine in cobol. it wasn't a good
language/model to begin with, and this is a particularly difficult application
of the subject that only occurs to people because we're stuck with the
technology.

~~~
nness
I think this kind of thing isn't born out of necessity, since we're locked in
with the tech, but more because its a challenging experiment that requires
some pretty clever CSS to accomplish. You should certainly not do this in the
wild.

~~~
Pxtl
I didn't mean that this is done out of _necessity_ , I mean people only give a
half-baked mess of standards that is modern web-layout/css the time of day
because it's foisted upon us.

If CSS were just another layout engine for just another platform, people would
laugh it out of the room and not bother with this kind of artistic stunts.

CSS does not deserve the kind of respect that would go into this sort of
craftmanship.

~~~
smt88
Some people like to do things just to see if they can do them. This project is
interesting not just because CSS is not meant to do this, but also because CSS
is so half baked.

------
na85
I came in expecting this to be an example of a website without tons of nested
<div> elements- the problem that html5 was supposed to solve but didn't.

~~~
u124556
> the problem that html5 was supposed to solve but didn't

I always thought html5 solved it, but then came bootstrap and got us back to
div-hell.

------
mikeryan
The first couple of these all have before and after pseudo elements. If you're
going to use those its kind of cheating calling it a single div when you have
3 styleable elements

~~~
abritishguy
I disagree - you still only have one element in markup which is the whole
point.

~~~
untog
But when you're using CSS to turn one element into three... what is the "whole
point", exactly?

~~~
lstamour
You're using CSS. That's the point. Many people still think CSS is still stuck
in 2003. It's still limited, but it's come a long way... Heck, with just CSS
you can have a webpage react to your turning off the lights on your phone.

~~~
untog
Sure... but it's specifically using CSS to add extra elements. So it makes the
"just one div" thing feel a little silly. Surely you could do "just no divs"
and do the same trick on the <body> tag?

------
leni536
They are really nice but I really don't see the point why they are implemented
in css. Most of the images make use of the capability of directly using
gradients in the background-image property. Of course it could be easily
replaced by the appropriate svg element.

For the lollypop shadow I would make use of the 3D transformation capabilities
of CSS3. AFAIK svg is only capable of affine transformations (why?) while CSS3
can handle perspective transformations too.

~~~
vlunkr
By creating images in css you don't have to load any additional assets. But I
suspect these are more just for the author to show off her skills :) *EDIT his
-> her

~~~
inflagranti
AFAIK you can embed images in CSS using data URIs, so there goes that argument
and only the show-off one remains ;)

~~~
vlunkr
You can do that, but I think embedded images are slightly larger than the
original because the way they are encoded. But still, images are more
practical since these would be a cross-browser nightmare.

