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.
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.
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.
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?!?!?!!!"
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.
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.
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.
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.
> 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 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.
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.
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.
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.
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.
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
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:
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.
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.
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 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.
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?
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.
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.
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.
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!
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.
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.
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?
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!
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 :-(
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.
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.
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
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.
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.
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
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.
But it's beautiful and clever, and if you truly can't appreciate it, that's sad.