I hate to be "that dick" so let me first say that this is damn impressive stuff; kudos to the authors for some serious CSS wizardry!
It's also completely and totally useless. The person / people who did this are obviously talented and have a lot of expertise. I'd really rather see people with this level of ability contributing meaningful, useful tools / techniques to the community rather than seeing this type of post over and over again.
I can hear the arguments now, "but it shows off the power of CSS!"
No, it doesn't. It shows off what a clever person can achieve by tinkering with a system; but there's no practical value to most of the techniques demonstrated. CSS has a lot of power; but its best demonstrated by projects like the CSS Zen Garden that show off real-world CSS use.
Eh, maybe. This site doesn't really offer much in the way of educating visitors about the concepts employed. Additionally, anyone who is at this level of CSS already, won't see this site and say, "oh wow, I didn't know that could be done in CSS". It has been done many times before, just in different contexts. Just check any of the site's 'inspiration' links. I'm sure it'll be super useful for the author's portfolio, but why do I care about that?
I think maybe, being a front-end guy, I'm a lot less impressed with it as it's part of my job to keep up on this kind of thing so I've seen it a lot already.
Now if this had been a tool that would generate CSS shapes with sliders/toggles allowing you to manipulate the shapes/logos in place, that would be cool and educational/useful.
I think this is akin to drawing the Mona Lisa in MS Paint. Yes, it's impressive that it can be done. That doesn't mean you should do it and it's still outside my skill and patience level.
Totally fair; and I wasn't intending to pick on this example in particular. However, I see a lot of this "look at this amazing shit we pulled with CSS" that's generally inapplicable beyond their (admittedly cool) example.
The other week, I heard a developer talking about one of these "amazing shit we pulled with CSS" examples and excitedly tried his hand at a few inspirations of his own. (Sadly, they didn't go further than his own machine.)
Later, as he was working on a new feature, he realized he could achieve a particular effect without any images for a slight improvement in performance (fewer requests and all that). That achievement came because of the experimentation he did a week earlier.
I think there can be a lot of value in experimenting for the sake of experimenting. It's part of the fun of coding. Aside from the potential morale benefits, sometimes the experimentation leads to useful inspirations that make it to production.
A CSS logo would be useful for performance issues and overall page rendering speed. A CSS animated logo, such as the Atari example, even moreso than a Flash / JS counterpart. CSS renders more quickly than images, and definitely more quickly than embedded Flash.
That's cutting a pretty broad swath there; CSS does not necessarily render more quickly than images--especially on low-end devices. For example, things like drop shadows are incredibly slow to draw in CSS on low-end devices whereas downloading and rendering a properly compressed 1kb png is significantly faster.
It also depends heavily on the complexity of the logo and the painting implications. To say simply that "CSS will be more performant" is categorically incorrect.
Projects like this are analogous to F1 cars. I'll never drive one but they demonstrate the bleeding edge of automotive technology. Much of this technology trickles down to production cars that I will drive.
Projects like this show the potential of CSS. Tho I will likely never create a logo out of CSS, the techniques displayed here will likely trickle down into more mainstream applications of CSS that I will use.
That's a false analogy though. To keep with your automobile theme, this is more like taking a car, and using it as a boat.
Instead, we should throw support behind something that is designed to be a boat. In this case, for example, SVG would fill the role of rendering logos much better.
My point is, I'm not sure how much of this bleeding edge demonstration will be able to trickle down into the real use case of CSS, which is in web page presentation, not drawing pictures.
Sometimes people make things just to see if they can and to show off, even if it doesn't improve the lives of other people. It's a showcase to show off the flexibility and capabilities of CSS.
I mean, one could easily argue that delivering movies and TV shows to people via the internet is also completely and totally useless, couldn't they? So yeah, you are being that dick.
I think it shows that people will work on what people like working on, especially during their precious free time.
If you rake your memory you could probably find points in time when you were working on something you really enjoyed, even though you had other good ideas that would better benefit the community. I know I certainly have been in that situation.
You're not being "that dick" - you've justified your point of a review. ("That dick" would just post "It's completely and totally useless" and leave it there).
Anywhoo, that's awesome. And I do think it's useful - as mcknz says, it's a pretty great starting point. It's also pretty great motivation :) From this, people can derive practical value.
Stu Nicholls, the clever guy behind cssplay.co.uk did start with css experiments that you could qualify as useless (like this amazing puzzle[0]) and this developped into real browser proofed css menus of all shapes.
From anothe viewpoint, it was for me an occasion to have a look at the code, and see how it works, and that's just nice.
The samples may not have any practical use, and I could have tried to look at the source of any css heavy page instead, but this was a simple and fun way to have a glimpse into the latest(?) css tricks.
No, playing fun with the system itself could be useful in unexpected ways. Like esoteric programming languages (leads to the serious exploration of unconventional computation models), code golfing and obfuscated codes (helps shaping the knowledge of a particular language and often leads to the clever way to tackle problems), demoscenes (you know where the Spore came from) and hacking (with the original meaning).
As long as you are aware of doing something unconventional, it is fine to keep these sports. If he/she did put these logos in production then I'll object though.
I completely agree with you. The act of exploration is a beautiful thing. However, my statement was based on the fact this technique has been done before. This area has been explored. While this site is executed very well, in my eyes, it doesn't offer (or attempt to, seemingly) anything I have yet to see. That was my only real point.
This is cool but isn't this what SVG (ignoring browser incompatibilities) is for? CSS is for affecting the layout of the content. In most uses a logo is content, that content could still be affected by style, but I don't think it should be entirely defined by CSS.
SVG is available in any browser that supports all the selectors being use (i.e. it'll not work in IE6/7/8 with CVG, but these CSS versions probably won't either), and the code for them in SVG would be significantly smaller then that markup+styling I'd wager.
Maybe a dumb question from someone who isn't proficient with CSS -- but if you can render these as vector images, can't you autogenerate the CSS for them?
And the reason I even ask is I feel like I could draw all of these logos pretty well with Illustrator, but couldn't just sit down in a text editor and make these logos with CSS.
It's funny, I love front-end development and I have the exact opposite problem. Trying to design these in Illustrator would be awful. But HTML+CSS, not too hard.
This is especially the case with buttons. Photoshop is confusing, CSS3 less so.
I'm slightly blown away by this. Call my naive, but perhaps I knew this was possible but just wasn't expecting it to look as good as it does. I'm not sure what's more surprising, how good the logos look, or the fact that someone had to have spent a tremendous amount of time designing all these from scratch with CSS.
I'm kind of bummed that most of these are thoroughly broken in Opera, and I wonder whether it's the CSS that's broken or whether Presto is rendering them wrong.
You can see that they included browser specific prefix for Firefox and Chrome/Safari, that is -moz-* and -webkit-* respectively and left out (although not everywhere) the Opera's one (-o-). So yeah, the CSS won't work wheter the Opera implements these preview features or not. And I'm sure it implements most (if not all) of them.
But to be fair, the CSS itself should work as soon as the specification is closed and browsers implement it under the regular names, without those prefixes.
I made GUI icons out of "normal" HTML using pseudo-elements...but is was an experiment to work within constraints. This kind of stuff is going a bit far.
"Semanticallity" (sic), wrt templates and css is not all it's cranked up to be.
It's just voodoo thinking on the part of web designers that were taught about it circa 2000.
And it basically comes from the misunderstanding that the html page is the data, when it's really just a RENDERING of the data. The data is what's on the DB or storage system --and that, yes, has to be semantically stored and attributed.
The template is just a means to show them GRAPHICALLY, not semantically.
Except if our main purpose is to make screen scrapping easier.
Only if you have a poor system of sharing data, one that necessitates the rendering to be the data. Why put that inflexible requirement upon yourself? We have plenty of renderings that are not supposed to be data (i.e mechanically readable) by themselves, from graphical UIs to paper printouts.
> We structure databases semantically for backend developers.
> Why shouldn't we structure display markup semantically for frontend developers?
Because the target audience of the display markup is not "front-end developers", it's our website viewers. And they could care less how we structure our display markup.
A truly intelligent system of content/display separation wouldn't use "semantic markup" and such nonsense, but true separation, i.e multiple types of data output.
Take accessibility for example. What's good for a web browser is not equally good for a screen reader.
The optimal path would be not to share the same display markup, but to create a specialized screen reading output that can leverage the same underlying data.
We only do a half baked work when we add media css, alt attributes and such to "semantic display markup". It's a leaky abstraction.
And then you go and implement an interface to the website as an Android or an iPhone app, and suddenly the "semantic display markup" is useless, you do it with custom queries and native controls. Or you go an implement a voice operated interface to the site, like voice xml, and the "semantic display markup" is of no use here too.
Heck, even when we output something as basic as an Atom/RSS feed, we don't get to reuse the "semantic display markup", we output a customized feed.
Because the target audience of the display markup is not "front-end developers", it's our website viewers. And they could care less how we structure our display markup.
That's not really true, though. The viewer is the target audience of the display output, not the markup. The target of your markup is either someone technically minded (who would do a 'view source') or some sort of crawler that is trying to derive semantic sense from your document.
In that context, semantic markup makes total sense. Part of me is still disappointed that using XML+XSL for web pages never took off- implementation nightmares aside, separating page data and page presentation is an awesome concept.
Because the target audience of the display markup is not "front-end developers", it's our website viewers. And they could care less how we structure our display markup.
By that line of reasoning, why should a semantically-structured database matter? The website viewers never see that, either.
Unless the reason you care about semantics in your database is for ease of development. In which case, all the front-end developers you might work with in the future would thank you for thinking of them when you output your markup.
Perhaps this is a naive question, but are there any benchmarks comparing client-side load times for actual images vs. images rendered in CSS?
Server-side bandwidth savings is easier to calculate, and while I realize this kind of savings for sites like Twitter can create noticeable margins, I'm curious as to what the cost-benefit threshold is.
Can't give you any hard numbers but I'm quite sure that "CSS images" this size load faster in most cases. But, once you load an actual raster image you're done with it: you can cache it, reuse it as many times as you want, manipulate it's placement, etc. - all without significant performance issues. With "CSS images" that's not the case. Placing a few on one page and/or allowing user any interaction with them will create performance bottlenecks more often than not. For the 'real world usage' it's safer to stay with the raster images.
Excellent work. Can you imagine how amazing it would be if there were a tool that allowed us to convert/output all our images as CSS/SVG/etc instead of bitmaps? I, for one, look forward to the day when the only static assets we have to worry about are text-based assets such as CSS and JS.
That's not always true. Any image with an alpha channel will have an opacity style attribute. In the firefox logo[1], for example, you see things like this: <td bgcolor="#081b3c" style=opacity:0.17;filter:alpha(opacity=17) />.
I love this. Challenging small but crazy ideas always strengthens our creativity. Remember your childhood. We created a lot of unique stuffs by using imperfect materials around us such as junk and bulk. These continuous challenge will be nutrition to help us become great creators.
This looks impressive, but I think an SVG image would be just enough and the right tool for single-color logos like those of Adobe, Twitter and Nike.
For Nike it will be just a background declaration, the curve with Bezier parameters and the foreground color. It will be much more compact and be able to scale.
And just as much cross-browser as CSS, which means not totally cross-browser. Your logos are broken in Opera and IE, for example.
I understand it takes much effort and expertize, but it's not the right tool for drawing images. You could do this by just exploring the UTF characters table and positioning differently colored characters near each other to make an image. But the fastest way to draw a vertored shape in a browser is still SVG.
I have more, but don't want to spam links. If you want to see more you can crawl through the /demo/ folder on the page.
Most of them are experiments with CSS3, javascript and html5.
It's also completely and totally useless. The person / people who did this are obviously talented and have a lot of expertise. I'd really rather see people with this level of ability contributing meaningful, useful tools / techniques to the community rather than seeing this type of post over and over again.
I can hear the arguments now, "but it shows off the power of CSS!"
No, it doesn't. It shows off what a clever person can achieve by tinkering with a system; but there's no practical value to most of the techniques demonstrated. CSS has a lot of power; but its best demonstrated by projects like the CSS Zen Garden that show off real-world CSS use.