Senin, 05 September 2011

0 Cara Membuat Efek Hover Dengan CSS3


Jangan Lupa Tinggalkan Komentar Kalian Ya...!!!

Salah satu efek yang bagus didukung cara pembuatannya
yang tidak sulit, tentu menjadi satu alasan bagi kita
semua untuk memilih dan menerapkan efek tersebut
ke dalam blog. Seperti pada tutorial kali ini yang mana
contohnya dapat Anda lihat di bawah ini. Silahkan
arahkan cursor Anda tepat berada di atas gambarnya :






Cara membuatnya adalah seperti berikut :

1.   Masuk ke Edit HTML.

2.   Cari tag </head>

3.   Copy kode berikut dan letakkan
      di atas tag </head> ini :

<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.6; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 20px gray; /*CSS3 shadow: 20px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 20px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 20px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>

KETERANGAN :

Aturlah opacity (kecerahan) gambarnya. Semakin
kecil nilai angkanya, gambarnya semakin pudar.

Atur juga besar dan warna shadownya
pada kode 0px 0px 20px gray;

4.   Rancangan -> Tambah Gadget ->
      HTML/JavaScript.

5.   Masukkan ke dalam kontennya
      kode berikut ini :

<div class="hovergallery">
<img src="URL gambar 01 Anda letakkan di sini" />
<img src="URL gambar 02 Anda letakkan di sini" /></div>

KETERANGAN :

Gantilah ke-2 (dua) gambar pada kode
di atas dengan URL gambar milik Anda.

Selamat mencoba dan tetap good luck!

0 komentar:

1. Good Girl
2. D'MASIF -sudah perih ini
3. Haney Bunny Sweety-G-String.mp3
4. ARMADA-Mau Dibawa Kemana.mp3
5. Ayang Ayangku.mp3
6. Tak Semestinya Kita Berpisah (TSKB).mp3
7. When The Children Cry - White Lion.mp3
Info

Catatan HUGGENG|CYBER

SELAMAT DATANG DI BLOG SAYA :), MAAF KALO DI BLOG INI ISI DARI KONTEN KURANG MENARIK< TETAPI SAYA AKAN MEMBUAT PARA PENGUNJUNG SENANG DI BLOG INI

Sekilas Tentang Admin

Saya Buakanlah Profesional Pembuat Blog Atau Web, Saya Masih Butuh Belajar, Dari Rekan2 Bloger. INFO:
BLOG ANAK INDONESIA UNTUK ANDA SEMUA

Follow

Follow HUGGENG|CYBER

Nikmati Layanan TV Online Gratis di HUGGENG|CYBER *