Facebook Twitter Gplus LinkedIn RSS
Home » Blog » Home Screen Icon Gloss Effect with CSS

Home Screen Icon Gloss Effect with CSS

Published on March 28th, 2012

I recently created a new “about” panel for my zApps that will display all of my zApps on the iTunes’ store, much like I did in the panel on the right side of this website. If you’ve ever looked closely at an App’s icon, you will notice that they all have rounded corners and a shine affect, both of which are added after the fact.

Here is a normal icon:

To round the corners, we use the following webkit code:

-webkit-border-radius: 10px;

This will give you icons similar to the ones on the right side of this website. I also added an “inset” border to the bottom to give it that raised effect.

border: thin solid #333;
border-bottom: 2px inset #333;

While other browsers may render the icons correctly so far, this is where Safari’s webkit is going to shine. We are going to add the shine effect with CSS directly to the icon. To do this though, we must make the icon a background image, and then hardset the size of the surrounding div.

display: block;
width: 57px;
height: 57px;
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.3)),
    color-stop(10.5%, rgba(140,140,140,0.4)),
    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('../zApps/Whipped.png');
background-size: 57px 57px;

And here is the end result (I took a screen capture in case you are not viewing this in Safari).

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl's work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.


Leave a Reply

Your email address will not be published. Required fields are marked *

© 2012 zSprawl's zApps

Fork me on GitHub