sekaruh oke: Uniqx Transparent

Uniqx Transparent 2.0

4

Cara Pasang Box Shadow Hover di Blog

Rabu, 20 April 2011

Label:
CSS

Baiklah pada kesempatan kali ini utta' ingin share lagi nich,.. mengenai trik CSS pada Box Shadow Hover. biasa utta senang banget bermain-main dengan CSS3, selain memiliki efek bagus, tampilan blog kita juga akan tampak lebih keren pastinya, lihat saja template utta sekarang..keren ngga?? hehe,.. :D

Berikut ini screen Demonya :

Contoh Sebelum Hover :

Contoh saat hover :

gimana??tertarik untuk mencobanya,..

sebelum kita ke tutorial pembuatannya, saya ingin jelaskan, disini utta hanya ingin memberikan trik pemasangan Box shadow hover pada kotak postingan saja,..

dan box shadow ini sendiri dapat dipasang dimana aja, seperti di kotak 'posting','sidebar' 'komentar' maupun pada 'footer', dari kita saya mau pasang dimana...

Untuk lebih jelasnya sobat perhatikan kode-kode berikut ini :

:::Kode CSS sebelum Hover:::

margin:1em 0 1em 0;

line-height:1.6em;

margin: 20px 4px;

border: 1px solid #999;

padding: 10px 6px;

border-radius: 8px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;

-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;

-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;

-o-transition: 1s ease-out;

-moz-transition: 1s ease-out;

-webkit-transition: 1s ease-out;

:::Kode CSS saat Hover:::

border-radius: 15px;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;

-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;

-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;

KET:

Sobat perhatikan teks yang berwarna merah, itu adalah warna box shadow. dan dapat anda ganti dengan warna kesukaan sobat sendiri.

untuk melihat-lihat warna lainnya Klik Disini.

Baiklah, kita lansung kelangkah pembuatannya..

Ikuti langkah-langkah berikut :

1. Login ke Akun Blogger anda masing-masing

2. Klik Design atau Rancangan, kemudian pilih edit html

3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)

4. Cari kode : ]]></b:skin>

5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .

.post-body {

margin:1em 0 1em 0;

line-height:1.6em;

margin: 20px 4px;

border: 1px solid #999;

padding: 10px 6px;

border-radius: 8px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;

-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;

-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 10px #CCCCFF;

-o-transition: 1s ease-out;

-moz-transition: 1s ease-out;

-webkit-transition: 1s ease-out;

}

.post-body:hover {

border-radius: 15px;

-moz-border-radius: 15px;

-webkit-border-radius: 15px;

box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;

-moz-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;

-webkit-box-shadow: -1px -1px 1px #666, 1px 1px 1px #666, 1px 1px 20px #F70000;

}

6. Terkhir Preview dulu,. jika berhasil. baru Save template..

Jika sobat masih bingung, sobat tinggal meninggalkan pesan pada kotak komentar

Semoga bermanfaat,..

Read more