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?
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.
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.
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.
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.
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?
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.
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?
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.
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.
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.
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.
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.
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?!?!?!!!"
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.
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.
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.
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!
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.
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.
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'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.
145 comments
[ 3.5 ms ] story [ 215 ms ] threadFor 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 forced her to search through everything possible in CSS (an obviously-limited medium), and get creative to convince it to draw these.
You can embed svg elements directly into html.
Working within constraints is fun. Art is fun.
Makes me wonder if we'll begin to see icon/image libraries released with pure css versions.
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.
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.
Show me one instance where this is actually applicable and more semantically appropriate than embedding an SVG and I'll shut up for life.
Remember your first novelty hack?
Plus, I guess I'm sorry the masses don't find some articles as fascinating as you?
It's all relative.
It's a website for the demoscene, where people do stuff like this https://www.youtube.com/watch?v=wqu_IpkOYBg in 177 kilobytes.
- 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
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.
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 always thought html5 solved it, but then came bootstrap and got us back to div-hell.
> Don't worry folks, I do know what SVG is. ;)
Let's pretend people didn't ever make contests of do X in assembly|binay|electronics... Or one liners contests, or blanckspace coding sprints.
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".
boom. see more here: http://www.polymer-project.org/components/paper-elements/dem...
But it's beautiful and clever, and if you truly can't appreciate it, that's sad.
Edit: Changed link
There's a lot of ads on the page , so maybe that's why.
Here's another one
http://marvelapp.github.io/devices.css/
You're probably right though. It's the ad-heavy pages that always seem to cause problems.
Interesting. Is it as sad as the fact that one still cannot vertically center a div in CSS without using elaborate hacks?
http://philipwalton.github.io/solved-by-flexbox/demos/vertic...
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.
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 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?!?!?!!!"
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.
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.
http://wiki.postgresql.org/wiki/Transactional_DDL_in_Postgre...
http://dev.mysql.com/doc/refman/5.7/en/implicit-commit.html
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.
Traditionally, people used tables for layout and <blink> tags for emphasis. That doesn't make it right, either.
http://i.imgur.com/V8HYrhK.png
Nice demo by the way, but why on earth did you use an id rather than a class?
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)
Flex box is great, but it's interesting that CSS implemented gaussian blurred inset shadows and 3d transforms before it addressed centering (incompletely).
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.
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.
Besides that, this is HackerNews; it's relevant.