Create Mac OSX Icon CSS3
Thursday, November 3, 2011 EDT (Updated on: Sunday, November 6, 2011 EST)
by: Eric Potvin
Tags:css
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:
Link to this Article
To link directly to this article from your web site, use one of the following snippets below.
Create Mac OSX Icon CSS3 | Book Of Zeus<a href="http://www.bookofzeus.com/articles/create-mac-osx-icon-css3/" title="Create Mac OSX Icon CSS3">Create Mac OSX Icon CSS3 | Book Of Zeus</a>
Short URL:
Create Mac OSX Icon CSS3 | Book Of Zeus<a href="http://s.bookofzeus.com/9M9QA" title="Create Mac OSX Icon CSS3 Short URL">Create Mac OSX Icon CSS3 | Book Of Zeus</a>