CSS3 Icons Gallery Demo

by Taufik Nurrohman

HTML

<h3>Change the Background Color</h3>
<a href="#" class="sc-icon puzzle" title="Puzzle">
    <span></span>
    <span></span>
</a>

<h3>Magnify + Change the Background Color</h3>
<a href="#" class="sc-icon blogger" title="Blogger">
    <span class="b1"></span>
    <span class="b2"></span>
</a>

CSS

body {text-align:center;background-color:#080;padding:20px;}
h3   {font:bold 18px 'Trebuchet MS',Arial,Sans-Serif;color:black;margin:20px 0px;text-shadow:0px 1px 0px rgba(255,255,255,0.3);}

/* GENERAL
 * Keep this attribution for legal use.
 * Credit: Taufik Nurrohman
 * http://hompimpaalaihumgambreng.blogspot.com
 * Add this CSS code for general icon dimensions.
 * ------------------------------------------------ */
.sc-icon {
  width:70px;
  height:70px;
  background-color:black;
  position:relative;
  margin:1px;
  display:inline-block;
  text-decoration:none !important;
  -webkit-box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.2),1px 1px 5px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.2),1px 1px 5px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 0px 1px rgba(255,255,255,0.2),1px 1px 5px rgba(0,0,0,0.4);
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
}

.sc-icon *,
.sc-icon *:before,
.sc-icon *:after {
  position:absolute;
}

.sc-icon:hover {
  position:relative;
  top:-2px;
}

.sc-icon:after {
  content:"";
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  background-image:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.1) 45%,rgba(255,255,255,0) 100%);
  background-image:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.1) 45%,rgba(255,255,255,0) 100%);
  background-image:-ms-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.1) 45%,rgba(255,255,255,0) 100%);
  background-image:-o-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.1) 45%,rgba(255,255,255,0) 100%);
  background-image:linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 45%,rgba(255,255,255,0.1) 45%,rgba(255,255,255,0) 100%);
  -webkit-border-radius:7px;
  -moz-border-radius:7px;
  border-radius:7px;
  z-index:87;
}





/*...