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

Create Mac OSX Icon CSS3

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 this 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