CSS3 Icons Gallery
Tabel Konten
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:
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;
}
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. :)