

The New Twitter Logo in CSS - Braasch
http://labs.upperdog.se/twitter-logo-in-css/

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

~~~
loceng
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
Or it's symbolising a desperate bird among many other birds trying to get some
food from a feeding hand.

Joking.

~~~
loceng
I laughed. Thanks.

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

~~~
theallan
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...](http://www.bitcurrent.com/marissa-mayer-at-velocity09-and-googles-
quest-for-speed/) (about halfway through that article).

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

~~~
theallan
Heh - it is not without its drawbacks! The Google Checkout icon didn't hit
that problem, as they used tables, but certainly in this case I don't see how
that could be achieved quite so readily.

------
reledi
Old and new logo side by side: <http://i.imgur.com/OAFlx.jpg>

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

------
jere
Seems like the Twitter logo is evolving towards the Dove logo:
[http://www.southernbellaswaystosave.com/wp-
content/uploads/2...](http://www.southernbellaswaystosave.com/wp-
content/uploads/2011/05/dove_logo.jpg)

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

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

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

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

~~~
upperdog
Just TextMate.

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

------
ankurpatel
Doesnt work in IE8

~~~
techdouchebag
Good

