Famous Logos Designed Entirely in CSS | Hacker News Reader

Famous Logos Designed Entirely in CSS

ecsspert.com

390 pointstilt79 comments

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.

I just deleted my comment after reading this. You said exactly what I had planned to.

I wish the time spent on this project was put towards something more useful.

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.

>> I can hear the arguments now, "but it shows off the power of CSS!"

I think it's naive to assume that this is not meaningful or useful.

It will certainly open creative doors in enough developers' brains to lead to innovations on other projects.

Not to mention serve as a portfolio to get the authors more business.

To me that's not useless.

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 find the examples analogous to Hello World or sample twitter clients. They give someone else a place to start.

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.

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.

> It shows off what a clever person can achieve by tinkering with a system

You could say the same about the Gosper glider gun. I don't want to be part of a hacker community that doesn't encourage autotelic projects.

Agree completely. As a proof-of-concept it's amazing. But practically speaking, SVG is a far better way of doing this.

It's also completely and totally useless

Not really.

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.

CSS is the wrong tool for the job. Your example would be better served (and easier to maintain) with SVG or Canvas.

or in some cases: data uris.

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.

Sometimes I wish HN had a downvote button

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.

It shows off what a clever person can achieve by tinkering with a system

Also called hacking.

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.

Yes, thank you for explaining the point. Some hacking is essentially research.

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.

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.

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.

[0] http://www.cssplay.co.uk/menu/amazing.html

Couldn't agree less.

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.

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.

Definitely.

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.

In theory, yes, in practice I don't know if such converter exists.

But SVG should be a better option anyway (it doesn't work in <IE9, but on the other hand, this probably won't either).

Hmmmm. Maybe there could be a SVG to CSS converter!

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 think it is kind of an irony that code displayed underneath those excellent logos is so hard to read because of those same css effects.

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.

Doesn't render correctly in IE9, either.

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.

edit: Here is the list of attributes supported by Opera http://www.opera.com/docs/specs/presto26/css/o-vendor/ (you can see that transform, the one left out in the first example, is one of them)

Yeah. Sorry to be a nitpicker, but these aren't logos designed entirely in CSS, they're logos designed in CSS and vendor-specific CSS extensions.

I hate to be pedantic but that should be "rendered entirely using CSS". The logos were designed by their respective designers using whatever tools.

Its confusing as well. Before clicking the link I thought they would be icons (newer ones, naturally) which were designed from scratch using CSS.

That's what I was thinking too.

You have a point, but the term "design" also applies to writing code, in this case CSS.

So I think the title still applies.

Adobe being first didn't impress me much, Twitter made me curious, and I was extremely impressed by Steve Jobs, Apple, BP and Nike.

Atari with the Pong game was pretty awesome too.

Whats the advantage of doing this versus sprite splicing

Few advantages, mostly disadvantages. But unbelievably cool.

There is probably a negligible bandwidth optimization doing it this way.

It's more just an impressive feat that pushes the boundaries of what's imaginable using CSS.

Steve Jobs looks like Gandhi.

These use a lot of empty divs. It's no different in approach to the "twitter fail whale in css" experiment of last year.

I'll be impressed when someone can build a logo out of CSS... semantically.

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

The rendering of data is data itself.

We structure databases semantically for backend developers. Why shouldn't we structure display markup semantically for frontend developers?

> The rendering of data is data itself.

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.

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.

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.

I have an Atom-Netbook and didn't notice any delay. The decoding of an image file is also a little work, i assume both are very low.

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.

Matt Seeley, UI Engineer at Netﬂix, made a presentation in which he touches these issues. It's available here: http://dl.dropbox.com/u/5618867/mseeley-2011-09-27-html5devc...

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.

Ringed a bell http://www.imgtocss.com/

Looks more like imgtotable. Interesting nevertheless.

I love that it actually converts the image to a table with bgcolor attributes. It doesn't rely on CSS at all.

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

[1] http://www.imgtocss.com/convert?url=http://www.imgtocss.com/...

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

Could someone explain the Atari one? Don't quite understand how it's animating.

I believe the relevant lines are

    @-webkit-keyframes ball { 0%, 100% { left:30px; top:107px } 30%
    ...

and

    -webkit-animation: player2 4s linear 0 infinite normal;

which define the animation keyframes and parameters.

See the webkit blog for information on how it works:

http://www.webkit.org/blog/324/css-animation-2/

Interesting. Thanks. :)

Also see the many many insane examples of CSS art on jsdo.it

http://jsdo.it/tsmallfield/counting_sheep2/fullscreen - double click for more animals

http://jsdo.it/norahiko/m1WT/fullscreen

http://jsdo.it/tsmallfield/pigg/fullscreen - cute "avatar" like on http://pigg.ameba.jp/ ameba pigg

This is really impressive.

I've never seen something like this in pure CSS. If anyone knows of anything this impressive, please post a link to it.

Made something similar a while ago:

http://sy0t0s.bplaced.net/demo/hero/ - Apple logo

http://sy0t0s.bplaced.net/demo/tubes/ - Nixie tubes

http://sy0t0s.bplaced.net/demo/opera/ - Opera Browser in your browser

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.

Impressive, thanks!

You have to weigh up the 'coolness' of such CSS trickery with the amount of extra HTML code there is, when you could have just used an image!

Our logo on https://entrydns.net/ is also made in CSS entirely

It's interesting opening it up with an older browser and seeing how it fails.

This is very clever. Is there supposed to be a practical application, or is it simply a "look at this neat thing I did with CSS" demo?

The droplets on the Pepsi logo, and the pong animation on the Atari, are very cool. Inspiration to better my CSS skills.

Logo are content, so they should be displayed with img, either as raster (png or gif) or as vector (svg).

Reply on news.ycombinator.com