Quantcast
Channel: phonydev.com » icon
Viewing all articles
Browse latest Browse all 2

iPhone-like glossy icons

0
0

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:
glossy icon demo

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:

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.


Viewing all articles
Browse latest Browse all 2

Latest Images

Trending Articles





Latest Images