Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

The New Twitter Logo in CSS

labs.upperdog.se

Post reply on HN
Print view View original

11–20 of 42 posts

Re: The New Twitter Logo in CSS

#11

Post by jQueryIsAwesome »

yagoogaly wrote: post #4
joshnh wrote: post #3

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…

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

And looks pretty for animations. Using Chrome console:

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

Re: The New Twitter Logo in CSS

#12

Post by joshnh »

upperdog wrote: post #8
joshnh wrote: post #3

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…

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

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

Re: The New Twitter Logo in CSS

#13

Post by alanh »

yagoogaly wrote: post #4
joshnh wrote: post #3

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…

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

Yes, but the same is true of SVG.

Re: The New Twitter Logo in CSS

#14

Post by illicium »

theallan wrote: post #5
joshnh wrote: post #3

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…

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

Or you could just use SVG.

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

is 897 bytes (579 gzipped)

Re: The New Twitter Logo in CSS

#15

Post by theallan »

joshnh wrote: post #7
theallan wrote: post #5

Earlier quoted context omitted.

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?

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.

Re: The New Twitter Logo in CSS

#16

Post by Melug »

joshnh wrote: post #3

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…

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

Re: The New Twitter Logo in CSS

#17

Post by theallan »

illicium wrote: post #14
theallan wrote: post #5

Earlier quoted context omitted.

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

Or you could just use SVG. https://gist.github.com/2b239e5d31ddc82ab660 is 897 bytes (579 gzipped)

I should have said that - excellent point!

Re: The New Twitter Logo in CSS

#18

Post by [deleted] »

joshnh wrote: post #7
theallan wrote: post #5

Earlier quoted context omitted.

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?

[deleted]

Re: The New Twitter Logo in CSS

#19

Post by i386 »

Melug wrote: post #16
joshnh wrote: post #3

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…

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

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

Re: The New Twitter Logo in CSS

#20

Post by ekianjo »

joshnh wrote: post #7
theallan wrote: post #5

Earlier quoted context omitted.

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?

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.
Post reply on HN