As part of a Not Very Secret Project, I’ve been poking around at how the iPhone picks and generates icons for sites that you bookmark to your home screen (I only learned about Apple touch icons earlier this afternoon). Apparently, unless you specify otherwise, it applies a glossy overlay to that icon when it gets clipped out.
A lot of people seem to hate that gloss, but there are some ways out there to replicate it, mostly using a PNG overlay. I thought it might be interesting to try and get the same effect using pure CSS (note that this probably won’t work if you’re reading this post via syndication; click through to the original to see it). I am indebted to Neven Mrgan’s PSD replication, which I used for comparison purposes.
So here’s a plain 57×57 touch icon:
And here it is with the gloss, which is put together with Webkit and Mozilla border-radius and CSS gradients:
It’s not perfect–browsers don’t let you specify blending modes for shadows and highlights, and the antialiasing on gradients is still a little wonky–but it works at least as well as an image overlay, and now I get to feel superior for doing it with code instead of sprites.
The CSS in question:
#glossy-icon {
width: 57px;
height: 57px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
background-image: -webkit-gradient(radial, 28.5 -47, 0, 28.5 0, 700,
from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),
color-stop(10%, rgba(255,255,255,0.2)),
color-stop(10.5%, rgba(140,140,140,0.2)),
color-stop(13%, rgba(140,140,140,0)),
color-stop(13.7%, rgba(255,255,255,0)),
color-stop(17%, rgba(255,255,255,1))), url(http://www.xorph.com/images/ba-icon.png);
background-image: -moz-radial-gradient(28.5px -47px 45deg, circle farthest-side,
rgba(255,255,255,1) 0%,
rgba(255,255,255,0.2) 72%,
rgba(140,140,140,0.3) 74.5%,
rgba(140,140,140,0) 85%,
rgba(255,255,255,0) 95%,
rgba(255,255,255,1) 160%), url(http://www.xorph.com/images/ba-icon.png);
}