CSS3 Icons Gallery

CSS3 Icons Gallery

This is my other experimental projects. Create icons with CSS3. I just make them by accident and started addicted. So I decide to keep it all in a single unit. This may be useful for you. Or not? Or, just to convey my main message that CSS could be an art if we want. Whatever. And here it is:

Go to CSS3 Icons Gallery

Don't just copy and paste it. Here I'll give a little extra tip for you. Something that normally all you need. Are you thinking about changing the color?

Change the Color

It's simple. Basically, I just use single main/general CSS code to create icons dimension. After that is the CSS to set icon shape in it. We will use that. First, add the main CSS code. This one is forever:

/* GENERAL
 * Keep this attribution for legal use.
 * Credit: Taufik Nurrohman
 * http://dte-feed.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;
}

/* Make glossy effect */
.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;
}

.sc-icon:hover:after {
  -webkit-background-size:100% 80px;
  -moz-background-size:100% 80px;
  -ms-background-size:100% 80px;
  -o-background-size:100% 80px;
  background-size:100% 80px;
}

Then choose one of the icons, get the CSS code and place it to the next general CSS code. Here I use Puzzle icon:

/* Puzzle */
.puzzle span {
  display:block;
  width:30px;
  height:30px;
  background-color:white;
  top:18px;
  left:18px;
}

.puzzle span:before,
.puzzle span:after {
  content:"";
  width:10px;
  height:10px;
  background-color:white;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  top:10px;
  right:-8px;
}

.puzzle span:after {
  background-color:black;
  right:auto;
  left:-3px;
}

.puzzle span:last-child {
  background-color:transparent;
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  transform:rotate(90deg);
}

and the HTML code:

<a href="#" class="sc-icon puzzle" title="Puzzle">
    <span></span>
    <span></span>
</a>

That's the basic usage. Now, how can I change the colors? In the HTML code you can see that there are two classes. One is the main class, and the other is secondary class. Use the second class to manipulate the background color. You also have to change some color of element & pseudo elements in it. Basically here I just include black and white color, so I guess you will not be too dizzy:

.puzzle {
  background-color:blue;
}

.puzzle span:after {
  background-color:blue;
}

Scaling

This is a scalable icons, so you can resize it. The principle is to change the multiplier numbers on each pixel element size (leave the percentage & degrees). Here is the example:

/* Magnify two times! */
.blogger {
  width:140px;
  height:140px;
  -webkit-border-radius:14px;
  -moz-border-radius:14px;
  border-radius:14px;
}

.blogger .b1 {
  width:24px;
  height:14px;
  border:20px solid white;
  border-bottom:none;
  -webkit-border-radius:24px 24px 0px 0px;
  -moz-border-radius:24px 24px 0px 0px;
  border-radius:24px 24px 0px 0px;
  top:32px;
  left:32px;
}

.blogger .b2 {
  width:36px;
  height:10px;
  border:20px solid white;
  -webkit-border-radius:0px 4px 28px 28px;
  -moz-border-radius:0px 4px 28px 28px;
  border-radius:0px 4px 28px 28px;
  bottom:30px;
  left:32px;
}

View Demo

Confused? Me too... Haha

This was just an ART. No more, just as breakfast for relaxing your mind about how bothered the CSS code on the project you are doing.

This experiment has passed the test in Chrome, Safari 5.1.2, IE9, Opera 11.52 and Firefox 11. Best viewed in Firefox (Maybe because I like Firefox)