css box shadow

Mari belajarlagi,kali ini kita akan membahas tentang CSS BOX SHADOW .Box shadow ini dapat agan pergunakan untuk mempercantik postingan sobat atau untuk memberikan gaya bayangan di sidebar blog agan,oke gan mari kita coba saja css seperti dibawah ini

joringta

Nah untuk kode css seperti diatas itu adalah seperti ini
#joringta { -moz-box-shadow: 10px 10px 5px #222; -webkit-box-shadow: 10px 10px 5px #222; box-shadow: 10px 10px 5px #222; }

Adapun perintahyang terdapat di dalam CSS BOX SHADOWnya adalah sebagai berikut uraiannya,dan anda dapat memodif lagi agar lebih indah..

Horizontal Offset=Jika nilainya positif maka bayangan akan beradadi sebelah kanan kotak,nah sebaliknya jika nilainya negatif maka bayngan tentu berada di sebelah kiri kotak

Verical ofset=Jika nilainya positif maka bayangannya akan berada di sebelah bawah kotak,dan sebaliknya jika nilainya negatif maka bayangannya berada di sebelah bawah

Blur radius=Jika nilainya nol maka bayangannya seperti biasa,dan jika nilainya ada maka bayangannya akan semakin blur

Warna bayangan=#222 ( #222) bolehagan ganti dengan warna yang lain menurut kebutuhan agan

Oke bro dibawah ini ada beberapa contoh menurut beyangan dari berbagai sudut untuk agan kembangkan lagi

joringta1

untuk kode css diatas adalah
#joringta1{ -moz-box-shadow: -5px -5px #666; -webkit-box-shadow: -5px -5px #666; box-shadow: -5px -5px #666; }

joringta2

untuk kode css diatas adalah
#Contoh_B { -moz-box-shadow: -5px -5px 5px #222; -webkit-box-shadow: -5px -5px 5px #222; box-shadow: -5px -5px 5px #222; }

joringta3

untuk kode css diatas adalah
#joringta3 { -moz-box-shadow: -5px -5px 0 5px #222; -webkit-box-shadow: -5px -5px 0 5px #222; box-shadow: -5px -5px 0 5px #222; }

joringta4

untuk kode css diatas adalah
#joringta4{ -moz-box-shadow: -5px -5px 5px 5px #222; -webkit-box-shadow: -5px -5px 5px 5px #222; box-shadow: -5px -5px 5px 5px #222; }

joringta5

untuk kode css diatas adalah
#joringta5{ -moz-box-shadow: 0 0 5px #222; -webkit-box-shadow: 0 0 5px #222; box-shadow: 0 0 5px #222; }

joringta6

untuk kode css diatas adalah
#joringta6{ -moz-box-shadow: 0 0 5px 5px #000099; -webkit-box-shadow: 0 0 5px 5px #000099; box-shadow: 0 0 5px 5px #000099; }
dan sengaja saya ganti warna biru agar lebih paham..

Oke gan demikianlah sedikit kreasiuntuk css shadow dan agan boleh lebih mengkreasikannya lagi,umpamanya jadikan dia di kotak komentar admin agar berbeda dari yang lain atau di halaman postinganmu,caranya gimana gan,caranya kita bahas dipostingan berikutnya..!!!