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.
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).
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.
For legacy browsers you do not have much choice but a bitmap image. SVG is not supported under IE8, and CSS support is very variable depending on the browser versions as well.
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?)
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.
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.
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.
Well, A) there isn't any originality there, and B) it is more impressive because of the skill involved. There is little to no skill in recreating a logo as simple as Twitter's out of vector circles - the originality was in the design, not the implementation.
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
41 comments
[ 0.21 ms ] story [ 92.6 ms ] threadThere 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.
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).
https://gist.github.com/2b239e5d31ddc82ab660
is 897 bytes (579 gzipped)
That of course is dog ugly ... just say'n it's possible :) An SVG or CSS approach would surely be more maintainable.
(Sidebar: do you really need "justification" for creating anything?)
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.
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.
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.
Joking.