Free CSS3 iPhone icon

13 October 2011

Try it yourself on JSfiddle.netWith no apparent reason I created these iPhone icons in pure CSS with no extra markup. Crab the code and do something cool with them!

Update 19 october 2011:
I updated the code and samples to a newer version. The changes:
- Links instead of div's as icons
- Large and small icons
- CSS animation on hover


The HTML code is really easy. One class (iphone) for the common styling and one class for the icon image:

<a href="#" class="iphone large jezus"></a>
<a href="#" class="iphone large maria"></a>
<a href="#" class="iphone large dudes"></a>
<a href="#" class="iphone small stabbed"></a>
<a href="#" class="iphone small commandments"></a>
<a href="#" class="iphone small peacock"></a>

And the CSS is pretty straight forward too. Change or create the background-image classes to create custom icons:

/*** icon image classes ***/
.jezus        { background: url(http://www.maartenvandenberg.org/images/2011-03/jozef_en_kind.thumb.jpg); }
.maria        { background: url(http://www.musical-info.nl/images/m/maria.jpg); }
.dudes        { background: url(http://www.visual-arts-cork.com/images-paintings/masaccio-money.jpg); }
.stabbed      { background: url(http://www.visual-arts-cork.com/images-renaissance/ribera-trinity.jpg); }
.commandments { background: url(http://interfaithradio.org/sites/interfaithradio.org/files/images/web_ten%20commandments.jpg); }
.peacock      { background: url(http://3.bp.blogspot.com/-sIxFscFj_lo/Tc16Hgaw9ZI/AAAAAAAAAG4/EZJdG15KL9w/s200/princePeacockLR.jpg); }

/*** the iphone icon effect ***/
.large {
  width: 200px;
  height: 200px;
  border-radius: 25px;
  box-shadow:
        0px 0px 2px 0px rgba(0,0,0,.5) inset,
        0px 5px 10px 0px rgba(255,255,255,1) inset,
        0px 6px 5px -3px rgba(0,0,0,.5),
        0px 50px 80px -40px rgba(0,0,0,1);
}
.large:hover {
  box-shadow:
        0px 0px 2px 0px rgba(0,0,0,.5) inset,
        0px 5px 10px 0px rgba(255,255,255,1) inset,
        0px 6px 5px -3px rgba(0,0,0,.5),
        0px 60px 80px -40px rgba(0,0,0,1);
}
.small {
  width: 100px;
  height: 100px;
  border-radius: 12.5px;
  box-shadow:
        0px 0px 2px 0px rgba(0,0,0,.5) inset,
        0px 5px 10px 0px rgba(255,255,255,1) inset,
        0px 6px 5px -3px rgba(0,0,0,.5),
        0px 25px 40px -20px rgba(0,0,0,1);
}
.small:hover {
  box-shadow:
        0px 0px 2px 0px rgba(0,0,0,.5) inset,
        0px 5px 10px 0px rgba(255,255,255,1) inset,
        0px 6px 5px -3px rgba(0,0,0,.5),
        0px 35px 40px -20px rgba(0,0,0,1);
}
.iphone {
  float: left;
  margin: 50px 25px 0px 25px;
  -moz-transition: 500ms;
}
.iphone:hover {
  -moz-transform: translate(0px,-10px);
}
.large:after {
  width: 200px;
  height: 200px;
}
.small:after {
  width: 100px;
  height: 100px;
}
.iphone:after {
  position: absolute;
  content: '';
  border-radius: 25px;
  background-image: -moz-radial-gradient(50% -65%, circle, rgba(255,255,255,.5), rgba(255,255,255,.2) 70%, transparent 70%),
                      -moz-radial-gradient(50% -65%, circle, rgba(0,0,0,0), rgba(0,0,0,0) 70%, rgba(0,0,0,.15) 70%, rgba(0,0,0,.1) 100%);
  background-image: -webkit-radial-gradient(50% -65%, circle, rgba(255,255,255,.5), rgba(255,255,255,.2) 70%, transparent 70%),
                      -webkit-radial-gradient(50% -65%, circle, rgba(0,0,0,0), rgba(0,0,0,0) 70%, rgba(0,0,0,.15) 70%, rgba(0,0,0,.1) 100%);
  background-image: -o-radial-gradient(50% -65%, circle, rgba(255,255,255,.5), rgba(255,255,255,.2) 70%, transparent 70%),
                      -o-radial-gradient(50% -65%, circle, rgba(0,0,0,0), rgba(0,0,0,0) 70%, rgba(0,0,0,.15) 70%, rgba(0,0,0,.1) 100%);
}

Oh, and you noticed that the striped blue background was also CSS3? Here you go!

body {
    background-color: #4DBAF2;
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-size: 50px 50px;
}

Have fun! And don't forget: if you create something awesome with this, don't forget to post a link in the comments!

Oh, one more thing... Do I hear you say "I want one of those red notification circles in the top right corner!"? Post a comment and i'll add that too!
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

2 comments

  1. Gravatar

    Soycake

    16 March 2012

    Great tutorial! I'll try on my site. You can guide me to add text caption below Icons.

  2. Gravatar

    Jennefer

    14 October 2011

    Whooot!! I'd like to try this one myself, but I'm pretty hooked on my BB. You make it look so damn easy. Don't stop playing on this playground! Promise? I bet I'll see you soon @rocaccino. Have a good one!