The New Twitter Logo in CSS

http://labs.upperdog.se/twitter-logo-in-css/

by Braasch • 14 years ago

66 40 14 years ago

labs.upperdog.se

Thanks, saved me from having to figure out the circles by myself.

joshnh4• 14 years ago

While I appreciate the time and effort that went into producing this, I must admit that I am a little confused; what is to be gained by recreating logos using only CSS?

There are only two answers that I can come up with: practice or showcasing new properties. In my opinion, both of those reasons don't justify recreating an image using CSS. Surely if you wanted to practice, or showcase a property, you would be better off creating something that could actually be used?

Please feel free to 'enlighten' me, as I have almost certainly overlooked something.

yagoogaly• 14 years ago

The only advantage I can think of is that if the circle sizes are set dynamically, then the logo will scale to any resolution.

jQueryIsAwesome• 14 years ago

And looks pretty for animations. Using Chrome console:

    $$(".wrapper")[0].setAttribute("style",
    "-webkit-transition: 1000ms ease;-webkit-transform: scale(0.3);")

alanh• 14 years ago

Yes, but the same is true of SVG.

theallan3• 14 years ago

Speed and size - if you you were using images, you are going to incur an extra HTTP request, while using this method everything needed to draw the logo is already at the client-side. In terms of size, the HTML and CSS needed to draw the logo could well be smaller than that needed for an image. In this case the HTML+CSS is around 2.6K (without the Google analytics code), while a screenshot of the logo is around 10K - and the HTML+CSS version will scale to any size without pixilation.

Google's Marissa Mayer did a talk about Google's quest for speed a few years back, where she showed that an HTML version of the Checkout icon was faster than an image: http://www.bitcurrent.com/marissa-mayer-at-velocity09-and-go... (about halfway through that article).

joshnh4• 14 years ago

What would you then recommend when needing to support legacy browsers?

illicium• 14 years ago

Or you could just use SVG.

https://gist.github.com/2b239e5d31ddc82ab660

is 897 bytes (579 gzipped)

tfennelly• 14 years ago

If image loading speed is an issue you can embed the image in the html <img src> as a base64 encoded string.... no remote loading then.

That of course is dog ugly ... just say'n it's possible :) An SVG or CSS approach would surely be more maintainable.

sp332• 14 years ago

A PNG of the same size as the one on that page is only 2.8 kB https://www.dropbox.com/s/6epgslr0olpu2rp/tlogosmaller.png

upperdog2• 14 years ago

I would not recommend using CSS generated images in production – SVG is a much better choice. In this demo, the goal is merely to demonstrate the beautiful shapes behind the new logo.

(Sidebar: do you really need "justification" for creating anything?)

joshnh4• 14 years ago

I was merely curious as to the thought process. Thanks for offering some insight.

brianfryer• 14 years ago

Why do people make sand castles? Or sidewalk chalk-art? Why put energy into something seemingly trivial?

Because we (collectively) can.

And yes, people would be better off creating something 'useful'. But everyone has hobbies, and this may very well be just that -- someone's hobby project.

The page also gives congratulations to the new logo. I suppose this could even be a modern day tribute to honor Twitter's new direction.

Melug2• 14 years ago

It will look cool in iPad, PC, Mobile devices. No need to create multiple images at any size.

i386• 14 years ago

Use SVG. It's a million times better and its a lot less likely to break. Heck, it's designed to draw images.

ComputerGuru2• 14 years ago

It's art. What purpose does art ever have?

If you're the kind of person that feels art is of no real value, this is the same. If you're the kind of person that feels are is in and of itself something to cherish for its own sake, then this is also the same.

duaneb2• 14 years ago

There is no originality here. I have a lot of difficulty accepting this as anything but time spent adjusting CSS to conform to the reference image. Impressive for the time spent, but hardly art.

fady• 14 years ago

overlooked something? are you joking? gee whiz..i wish i could downvote you. it's art, and this specific logo works really well as CSS. awesome job @upperdog_se

joshnh4• 14 years ago

I agree with you in the case of something original, but I'm not entirely sure how this qualifies?

Melug2• 14 years ago

What IDE is used to create the logo? adjusting size in code is difficult.

upperdog2• 14 years ago

Just TextMate.

snikch• 14 years ago

Also seen here: https://github.com/Haizyfox/twitter-bird-pure-css

cmelbye• 14 years ago

Am I the only one who's bothered by the slight tilt that they introduced into the new logo? I don't think the old bird was weirdly tilted like that.

iconfinder• 14 years ago

No, my OCD going nuts as well.

whiskyant• 14 years ago

It's deliberate, it makes the bird look like it's ascending into the skies with joy.

loceng2• 14 years ago

It's triggering optimism / uplifting. Interesting it's bothering you in some way.

Edit: To add, it also could be that there's no movement to it - so it also gives me a sense the bird is stalling, and about to fall the ground.

onlyup• 14 years ago

Or it's symbolising a desperate bird among many other birds trying to get some food from a feeding hand.

Joking.

reledi• 14 years ago

Old and new logo side by side: http://i.imgur.com/OAFlx.jpg

kennedysgarage• 14 years ago

Old and new logo overlaid on top of each other: http://dribbble.com/shots/592612-New-Twitter-Logo

skore• 14 years ago

That's not CSS, that's HTML+CSS.

jere• 14 years ago

Seems like the Twitter logo is evolving towards the Dove logo: http://www.southernbellaswaystosave.com/wp-content/uploads/2...

acoyfellow• 14 years ago

This was my bought exactly. Like the simplicity, but this looks less like a tech company now.

ankurpatel• 14 years ago

Doesnt work in IE8

techdouchebag• 14 years ago

Good

The New Twitter Logo in CSS

Related Stories