I don't understand this trend of making images in CSS3. Isn't that what SVG is for?
Errr, isn't that what PNG is for? o.O
the size of PNG is much bigger than one css file .. isn't it ..
Also, gzip is much more efficient on plain text.
very much true..
Some of us cannot make a nice looking shiny "Sign Up" button in Photoshop. So this is great.
I'm guessing it's done as an experiment and proof-of-concept instead of being offered as a best practice.
yes it is done as an experiment but don't you think by using CSS3 ... you don’t have to regenerate images every time you change the text, pages will load much faster because you don’t have to download separate images .
i can say by css3 in some portion we can replace the images.
The browser has to render the CSS, which takes a non-zero amount of time. It's possible that the browser rendering time of some (very) complex CSS could surpass the time to fetch an image over the network and render that.
Putting these small images together into one file is a good way to speed up the load times of the page.
However, I think the the CSS file would have been smaller with the icons as PNGs in a data URI or by using a single CSS-Sprite. You wouldn't be able to scale the icons, though.
CSS-Sprite is one way to speed up the load time but even though this css file is still much smaller than the size of images used in CSS-Sprite.
And on the other hand the programmer could change icon property(like gradient , radius etc) very easily.
Maybe a nice photoshop plugin would be a converter for images (small images, icon like) to css (like adobe with flash to ipod)
Nice ... may be later on some work of photoshop guys will come on to Web Developers