CSS3 Efek bayangan ( shadow )

Tutorial kali ini kita akan membahas Cara memberi Efek Bayangan ( shadow ) dari CSS3 , efek bayangan ini biasanya di pakai oleh blog / webdesain untuk mempercantik dan memperindah penampilan blog Anda , Namun tidak ada salahnya bila Anda ingin mencobanya sendiri . Efek bayangan ini bisa di terapkan pada text / Tulisan , gambar , Elemen berbentuk kotak ( box ) ,bahkan bisa di terapkan pada semua elemen - elemen di blog Anda ,dan Sebelumnya di blognya mastony kemaren telah membahas Cara memberi Efek transparan pada gambar dan background . jika belum baca silahkan baca disini Cara memberi Efek transparan , jika sudah baca mari kita simak bersama - sama Tutorial cara memberi efek bayangan ini :
lihat tabel di bawah ini :

Properti	Keterangan
text-shadow	untuk memberi efek bayangan pada tulisan / text
box-shadow	untuk memberi efek bayangan pada elemen berbentuk kotak / gambar

contoh :

h3.bayangan {text-shadow:px1 px2 px3 disini kode hex / warna }

px1 :nilai px bayangan jatuh ke kiri dan ke kanan , contoh : -3px( bayangan ke kiri ) atau 3px( bayangan ke kanan).
px2 :nilai px bayangan jatuh ke atas dan ke bawah , contoh -3px( bayangan ke atas ) atau 3px( bayangan ke bawah )
px3 : nilai px untuk ketebalan dari efek blurnya contoh : 3px
kode hex / warna dari bayangan tersebut ContOh :#444444

memberi efek bayangan pada text
berikut penerapannya CSS nya :

<style type="text/css">h3.bayangan1{color:#FFE500;text-shadow:-3px 3px 3px#444444;}</style>

dan di bawah penerapan Htmlnya :

<h3 class="bayangan1">
Tulisan Anda di sini</h3>

dan hasilnya seperti di bawah :

Tulisan Anda di sini

Anda juga bisa menggunakan 2 warna bayangan :
berikut penerapannya CSS nya :

<style type="text/css">h3.bayangan2{color:#FFE500;text-shadow:-3px 3px 2px#444444,0 -2px 1px#6BB200;}</style>

penerapan Html :

<h3 class="bayangan2">Tulisan Anda di sini</h3>

Hasil di bawah :

Tulisan Anda di sini

Memberi efek bayangan pada box / gambar

<style type="text/css">img.bayangan{box-shadow:-10px 10px 20px #000;-moz-box-shadow:-10px 10px 20px #000;-webkit-box-shadow:-10px 10px 20px #000;-o-box-shadow:-10px 10px 20px #000;}</style>

dan hasilnya seperti gambar di bawah :