CSS3 Icons Gallery

Tabel Konten
  1. Change the Color 
  2. Scaling 
  3. Confused? Me too... Haha 
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)

8 Komentar

  • Unknown

    kebetulan nich saya lagi bikin template... butuh banget relasi icon css3... makasih kang... hatur tengkyu.... !!!

  • Taufik Nurrohman

    @Denddy Gustiana Sama-sama :)

  • Unknown

    mass??
    itu bgaimna cara membuatnya ?? sya coba berulang ulang kok msih tdk bsa ya ?? :(

  • Unknown

    @Dwix Ciolist ya mas gimana cara mebuat icon css? please !!!!

  • Taufik Nurrohman

    @Agust Nurfa Kan sudah Saya buatkan contohnya di halaman demo :\

  • KMKO Sipil Unhas

    gan, ini apa bedanya dengan gambar yang di kasih link??

    trus bisa ngamas buat spoiler gambar. maksudnya kalo gambarnya di klik, ada konten yang muncul dibawahnya..
    terima kasih.. :)

    • Unknown

      Bedanya ini bro, jika memakai Code CSS Pastinya loading blog kita jadi cepet karna gak memakai URL aktif yang mengharuskan blog meload sesuatu, tapi jika memakai Gambar blog kita harus Meload URL imagenya terlebih dahulu (load gambar tergantung size dan resolusi). saya rasa hanya itu.

  • Unknown

    keren iconnya mas :-bd , izin make dan izin aku ta' edit dikit sizenya mau nyesuain dengan blog ane. :)

Komentar telah ditutup.