The New Twitter Logo in CSS
labs.upperdog.se
The New Twitter Logo in CSS
1–10 of 42 posts
Re: The New Twitter Logo in CSS
#2Thanks, saved me from having to figure out the circles by myself.
Re: The New Twitter Logo in CSS
#3While 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.
Re: The New Twitter Logo in CSS
#4While 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…
The only advantage I can think of is that if the circle sizes are set dynamically, then the logo will scale to any resolution.
Re: The New Twitter Logo in CSS
#5While 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…
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).
Re: The New Twitter Logo in CSS
#6What IDE is used to create the logo? adjusting size in code is difficult.
Re: The New Twitter Logo in CSS
#7While 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…
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 -…
What would you then recommend when needing to support legacy browsers?
Re: The New Twitter Logo in CSS
#8While 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…
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?)
Re: The New Twitter Logo in CSS
#9What IDE is used to create the logo? adjusting size in code is difficult.
Just TextMate.
Re: The New Twitter Logo in CSS
#10While 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…
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.