Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

CSS3 Icons Gallery

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)

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 8 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!