rss feed Twitter Page Facebook Page Github Page Stack Over Flow Page

Create Mac OSX Icon CSS3

Posted on Wednesday November 02, 2011 by Eric Potvin

Icons are great for identifying a product or anchor links. Often these icons are created using a graphic tool, such as Photoshop or GIMP and saved in a JPEG or PNG format.

This can be painful for the designer to update if a mistake is made or simply you want to change the theme of your website.

Here's a quick way to create these MAC OSX icons using CSS

.icon {
  background: #90C7DE;
  width: 256px;
  height: 256px;
  border-radius: 38px;
  overflow:hidden;
  border: solid 6px #666;
  position: relative;
  -webkit-box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, .2);
  box-shadow: 1px 2px 10px 1px rgba(0, 0, 0, .2);
  z-index: 10;
}
.icon .gloss {
  background: #56ABCB;
  height: 144px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 5;
  -webkit-box-shadow: 0px 0px 10px rgba(255, 255, 255, .3);
  -moz-box-shadow: 0px 0px 10px rgba(255, 255, 255, .3);
  box-shadow: 0px 0px 10px rgba(255, 255, 255, .3);
  border-top-right-radius: 170px 20px;
  border-top-left-radius: 170px 20px;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
  position: absolute;
  bottom: 0px;
}
.icon .text {
  font: bold 200px Tahoma;
  text-align:center;
  z-index: 200;
  position: relative;
  color: white;
}

HTML

<div class="icon">
  <div class="gloss"></div>
  <div class="text">in</div>
</div>

Here's an example of a MAC OSX Icon for LinkedIn:

in