A Single Div | Hacker News Reader

A Single Div

a.singlediv.com

649 pointsbrbcoding140 comments

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.

It's been done before (and posted here) http://marvelapp.github.io/devices.css/

Edit: Changed link

MalwareBytes doesn't like your link.

Odd, no problem for me.

There's a lot of ads on the page , so maybe that's why.

Here's another one

http://marvelapp.github.io/devices.css/

Cool, thanks for the new link.

You're probably right though. It's the ad-heavy pages that always seem to cause problems.

Sure, look up "single div" on codepen and you'll find tons (http://codepen.io/search?q=%22single+div%22&limit=all&order=...). I don't think this website claims any new technique, It just shows off a collection of things made using it...

Not true - none of those are a single div

None of these devices are one div... http://i.imgur.com/IwhB56A.png

Scanning through the comments, it looks like most of the naysaying was downvoted and the comments about how it's neat floated to the top, including yours.

This is pretty common comment pattern on reddit (everyone hand-wringing self-righteously over the "problem" of a few, heavily downvoted comments). It's disappointing to see it here. And yes, I realize there is some irony in this comment.

I posted my comment when those that are now downvoted were at the top, and the link had already been up for 3 hours and was near the top of the homepage. If it had been just a few unfortunate comments on a fresh thread, I would not have bothered. I'm glad things adjusted, but I was providing a point of view that was barely represented at the time.

Then it did its job! When I first came to this thread I felt super sorry for the original author of the page, who most likely didn't post it to HN. Such off-hand, unconstructive cynicism can crush somebody's self-esteem.

People are just tired of all the legacy technologies push. The web should become actually open to new technologies and languages.

Well said. Surprised this is the top comment!

> 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?

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://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.

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

Yes

For simple lookups, pretty much in my experience, especially as it doesn't seem to have seen much by way of updates since IE9.

Though quirksmode does go into more detailed analysis in places which can be pretty useful, particularly for when you are stuck supporting legacy browsers, so caniuse isn't a complete drop-in replacement.

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?!?!?!!!"

yeah, because users will die if content is not cantered strictly vertically in their IE10.

ignoring your frankly unnecessary sarcasm, I'd have to point out that some of us are held to the expectation that websites should look almost the same in older browsers. My previous employer, for example, required full support of all features in IE7, and that the product should even bear some resemblance to a website in IE6. In that situation (combined with AJAXed content making polyfills difficult), flexbox isn't usable. I'm sure I'm not the only one who has been in the situation of having to support non-bleeding-edge browsers.

The minimum threshold is IE10 since nothing prevents you from using the old spec which was implemented in that release:

https://gist.github.com/acdha/a91a46706de02c37566a

This is a little tedious but a CSS preprocessor makes it pretty easy and you only need to do it once for something this simple.

Since Microsoft is pushing automatic upgrades to IE11 hard for security reasons, I see over 80% of our users having a browser which supports flexbox. At that point, it's a manageable problem because you can deploy http://flexiejs.com/ for the people who are prevented by corporate policy from upgrading.

Vertical centering (flexbox) support landed on IE two years ago, not to mention other browsers. Please upgrade your "facts".

What constitutes an elaborate hack? You can do it with a hack, but it isn't really elaborate. Put the div in an outer div. The outer div has `display: table-cell` and `vertical-align: middle`.

That's all good and fine unless you also have some requirements about the geometry and behavior of outer div. Then you need to add another div and give it display: table but that interferes with the structure of your document.

Also you might want outer div to fit the space it lies in and height: 100% does not always work.

Basically somewhere around transition from IE to Firefox and from transitional to strict DOCTYPE tables were broken beyond repair for layout purposes. We have not recovered since. Flexbox brings some hope but not necessarily salvation.

Statements like this remind me of "MySQL does not support transactions".

It depends on what you mean by "supports". If you use myisam or need DDL statement rollback MySQL is still not a great option.

http://wiki.postgresql.org/wiki/Transactional_DDL_in_Postgre...

http://dev.mysql.com/doc/refman/5.7/en/implicit-commit.html

There's a good reason for that.

Traditionally, HTML layouts are not designed to specify any kind of vertical behavior. There is no "vertical" in HTML. How the interface works (your browser) and how it is used (up-down scrolling) naturally imposed a scaling on width, not on height.

I'm not sure why that's a "good" reason. It's possible to vertically center something using hacks and there are obvious use cases for doing so. The fact that CSS doesn't allow us to do so is a failing of the language, plain and simple.

Traditionally, people used tables for layout and <blink> tags for emphasis. That doesn't make it right, either.

elaborate hacks? 'position:absolute;top:0;bottom:0;margin:auto;'

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

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

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?

> 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/ (note: didn't bother with prefixes or older syntaxes so IE >= 11, Firefox >= 28, Chrome >= 29, Opera 12.1 or >= 19)

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

I once saw a jQuery plugin for something like that. Inspired me to make it with just CSS. The outcome is much like what you made.

http://jsfiddle.net/talmand/tb9NZ/

I now see that the jQuery plugin that inspired me now has a commercial license. I would have never considered monetizing something so easily created if you know how such things work. Granted, the jQuery plugin does have a few more features.

Div is like a canvas here, and background gradients create the image. What's so impressive about it?

Thanks for actually explaining it. Now I see why my other comment got down-voted.

If you read https://github.com/lynnandtonic/a-single-div/blob/gh-pages/R..., 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.

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.

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/

Hear hear! A true hacker forum should applaud experimentation not nitpick at it. It helps us all to know the limits of client-side drawing by various means no matter if your site needs a Mario mushroom or not.

>a key tenet of a great engineer is occasionally looking at absurd challenges and seeing if they can make something happen

Sure, if that absurd challenge has some benefit to someone out there. This is not true for CSS-only artwork. There are no applications for this.

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.

More like "386 emulator in javascript", methinks.

no kidding. The practicality of this is just non-existent. So you can do many shapes in CSS box-shadow, oh joy.

Show me one instance where this is actually applicable and more semantically appropriate than embedding an SVG and I'll shut up for life.

To say nothing of the fact that, because you can embed images in CSS, this sort of thing is only interesting at all if you actually look at the CSS source. It's kind of like someone making scrambled eggs with their hands tied behind their backs. Sure, it's challenging, but why should anybody care?

I agree the novelty has worn off, but for someone who's trying it out and has done it for the first time - it's a pretty cool hack.

Remember your first novelty hack?

I don't want to discourage people from playing around with CSS, or even from trying to make scrambled eggs with their hands tied behind their backs. It's good for people to challenge themselves in all kinds of creative ways. But this is supposed to be Hacker News. Making icons in CSS hasn't been newsworthy in a very long time, and I think it's lamentable that something like this is at the top of the home page while vastly more interesting things (like https://news.ycombinator.com/item?id=8224972) languish in obscurity.

I don't want to discourage people from playing around with snarky comments, or even from trying to make people feel bad with their hands tied behind their backs. It's good for people to challenge themselves in all kinds of creative ways. But this is supposed to be Hacker News. Making hypocritical comments hasn't been newsworthy in a very long time, and I think it's laudable that something like this is at the bottom of the comments page while vastly nicer things (like https://news.ycombinator.com/item?id=8229841) revel in the limelight.

OK, OK, point taken. I would have gone back and deleted my comments but it was too late.

It might be hard to realize that not everyone who visits the site has been around as long as the site has existed. There's nothing wrong for old content to be revisited; either for new eyes or refresher for old.

Plus, I guess I'm sorry the masses don't find some articles as fascinating as you?

Just because I like to shut people for life: Advertisement and decoration, you don't need an HTML element with title "pen for background decoration" where you want people to focus in your product. The other one is separation of concerns, many times the programmer and the designer work together, but is sometimes unhealthy to give the designer access to the templates (or php, whatever), is way less dangerous to give him access only to CSS, so using stuff like this helps in such case.

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.

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

Took me about five seconds to read the first post. It's a site for the demo scene.

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 in 177 kilobytes.

Thanks for following up. I had assumed you were talking about some aspect of the site's design so I just looked through the html for a couple minutes before giving up. And now I'm too busy being impressed to feel like a dumbass

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

C++, maybe a little assembly, and lots of shader code.

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

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

- the timeless — https://www.youtube.com/watch?v=lwFVlNytq0Q

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

Rewatching those reminded me of how phenomenal Demovibes 9 is: 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.

Do go to a site like pouet.net, and recalibrate yourself based on what people were doing way back toward the genesis of the scene, when there weren't any demo competitions and it was just a few guys fooling around with stuff for hack value.

Compare a hack like this to what people were doing back when even something like copper bars was seen as being pretty cool. Don't compare people doing the equivalent of display hacks using a relatively new technology to what the culture around display hacks grew into after several decades of active fermentation. That'd be right up there with poo-pooing a local recreational sports league because the players aren't as good as what you're used to seeing in the professional leagues on TV.

I assumed that there were even neater HTML/CSS hacks on that site, but couldn't find them. Are there any? It's pretty hard to navigate the site.

I do think that these are particularly well done, though. It's very crafty, creative and the pictures look nice.

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

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.

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.

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.

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

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.

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

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;
    }

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.

Chrome's style inspector pretty much tells you everything... it's mostly basic techniques used in very creative ways

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!

Relevant: http://pattle.github.io/simpsons-in-css/

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.

And still less verbose than SVG.

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.

This is wizardry.

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

Each image is not in fact an image, it's css styles applied to a single div.

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

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?

This is pretty cool, the attention to detail is great. I did something similar a while ago - 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!

Awesome!!! This is absolute Hacking!!!

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

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 :-(

Tested

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

But It's still wonderful.

That's not necessarily a drawback.

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

By using multiple box-shadows.

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

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

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.

shouldn't SVG be more relevant for this ?

Artsy!

Can't believe this.

Only CSS? cool

I saw 19 divs when I clicked on view source.

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.

Great work.

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

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

The author commented: https://twitter.com/lynnandtonic/status/504378544349126656

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

Theese days?

Let's pretend people didn't ever make contests of do X in assembly|binay|electronics... Or one liners contests, or blanckspace coding sprints.

yeah, what's the point of sailing solo around the world in 100 days when you can do the same trip by plane in just a couple of days!

What's the point of writing your own language instead of using an existing one?

What's the point of learning Haskell, if you're never gonna realistically find work with it?

Some things are just fun to do, and stretch the limits of what we can do.

Not everything has to have a real use case "point".

It's a hack. Therefore it has been posted on "Hacker News". I come to "Hacker News" because I like seeing cool hacks once and a while. Don't you?

I wouldn't call them hacks. They follow the standard rules of CSS. I would call them creative.

<google-maps></google-maps>

boom. see more here: http://www.polymer-project.org/components/paper-elements/dem...

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.

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.

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.

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.

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.

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

How was html5 supposed to solve it? All it did is to introduce more elements, so instead of generic DIV you can use ARTICLE, but it was not going to solve the problem of superfluous elements in any way. If you can reduce the number of your nodes in html5, you can do the same in html4.

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

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

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

It means you should be able to do more from semantic HTML only and CSS only, without mixing up markup and presentation.

Yet she uses a <div/> instead of an <img/>

The whole point is that you're using one element on your HTML code.

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.

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?

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.

It's but a proof-of-concept.

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

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

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.

*her skills

I'd say it's an artistic constraint.

It forced her to search through everything possible in CSS (an obviously-limited medium), and get creative to convince it to draw these.

You can inline svg.

By creating images in css you don't have to load any additional assets.

You can embed svg elements directly into html.

> I really don't see the point why they are implemented in css

Working within constraints is fun. Art is fun.

Agreed. I think this is less about practicality than it is about creating art with an unconventional set of tools or materials. In that regard I would say the artist pulled off something pretty impressive.

Reply on news.ycombinator.com