iPhone-like glossy icons
- posted on: February 3, 2009
- filed under: UI, icon, images, pixels
If you want to provide close-to-native iPhone experience in your pages, how about using shiny glossy icons, just like those used on the home screen.
You can make any image look like a rounded glossy icon by using:
- border-radius CSS property
- an alpha-transparent image overlay
For example:
Benefits:
- no image manipulation, just use existing images
- graceful degradation - IE7, 8 don’t support border radius, so they’ll display a glossy square image. IE6 has issues with PNG transparency, so I’m using a PNG8 file which IE sees as fully transparent. As a result IE6 will show the image unchanged.
But how does this work?
Using two divs:
<div class=“the-image“> <div class=“the-mask“> </div> </div>
How are these styled then?
- both divs get the width/height of the image
- both divs get
border-radius: 10px(and the same -moz-border-radius and -webkit-border-radius) - the background of the outer div is the image
- the background of the inner div is the mask
To make it easy, I’ve created a script that can generate the overlay mask image with any dimension. The script can be used like this:
- mask.php will give you a 100×100 pixels image
- mask.php?x=57 will produce a 57×57 pixels image
Code and examples
- A page with examples can be found here. Load in any IE to see degraded experience or Safari/Mozilla/iPhone for the full experience
- The code for the script that generates the mask as well as the test page are on github
The PHP script that generates the mask is fairly well documented if you want to tweak. The gist of it really is using GD library to create a fully transparent square and a semi-transparent piece of an ellipse.
1 Comment
-
Pingback by phonydev.com » Easy shiny buttons and toolbars — Feb 22, 2009
[...] updated my script that generates the shiny glossy overlays for icons (see previous post) to generate the new type of image. The script can be called like this: [...]