

Famous Logos Designed Entirely in CSS - tilt
http://www.ecsspert.com/

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

~~~
shawnee_
_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.

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

~~~
btucker
or in some cases: data uris.

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

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

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

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

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

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

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

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

~~~
rplnt
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)

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

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

~~~
dkrich
That's what I was thinking too.

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

~~~
WettowelReactor
Whats the advantage of doing this versus sprite splicing

~~~
todsul
Few advantages, mostly disadvantages. But unbelievably cool.

------
necolas
These use _a lot_ of empty divs. It's no different in approach to the "twitter
fail whale in css" experiment of last year.

~~~
mortenjorck
I'll be impressed when someone can build a logo out of CSS... _semantically_.

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

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

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

~~~
untog
_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.

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

~~~
bgarbiak
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...](http://dl.dropbox.com/u/5618867/mseeley-2011-09-27-html5devconf.pdf)

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

~~~
tilt
Ringed a bell <http://www.imgtocss.com/>

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

~~~
dwwoelfel
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/...](http://www.imgtocss.com/convert?url=http://www.imgtocss.com/assets/images/firefox.png)

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

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

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

~~~
eslaught
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/>

~~~
missing_cipher
Interesting. Thanks. :)

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

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

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

~~~
jwallaceparker
Impressive, thanks!

------
sabatier
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!

------
clyfe
Our logo on <https://entrydns.net/> is also made in CSS entirely

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

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

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

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

