CSS Box Shadow

CSS BOX SHADOW adalah contoh CSS yang digunakan untuk mempercantik tampilan website dengan CSS. Contohnya pada Blockquote di blog ini :

Yuk cekidot, langsung aja ke Tutornya ;)

Tutorial CSS Box Shadow by Huda-Cooyz , Support Firefox, Safari, Chrome, Opera and IE9

Code pada Box diatas adalah :

#contoh {
-moz-box-shadow: 10px 10px 5px #222;
-webkit-box-shadow: 10px 10px 5px #222;
box-shadow: 10px 10px 5px #222;
}

Adapun 4 bagian yang terdapat dalam box shadow adalah :

• Horizontal offset : Jika nilainya positif maka bayangan akan berada disebelah kanan kotak, dan jika negatif maka bayangan akan berada disebelah kiri kotak.
• Vertikal offset : Jika nilainya positif maka bayangan akan berada dibawah kotak, dan jika negatif maka bayangan akan berada diatas kotak.
• Blur radius : Jika nol maka akan seperti bayangan biasa, dan jika nilainya semakin besar maka bayangan akan tampak menjadi blur.
• Warna dari bayangan. 

Contoh lain dalam Box Shadow :

                Berikut ini adalah tampilan Box Shadow beserta Code CSS yang ada didalamnya :

#Contoh_A {
-moz-box-shadow: -5px -5px #222;
-webkit-box-shadow: -5px -5px #222;
box-shadow: -5px -5px #222;
}

#Contoh_B {
-moz-box-shadow: -5px -5px 5px #222;
-webkit-box-shadow: -5px -5px 5px #222;
box-shadow: -5px -5px 5px #222;
}

#Contoh_C {
-moz-box-shadow: -5px -5px 0 5px #222;
-webkit-box-shadow: -5px -5px 0 5px #222;
box-shadow: -5px -5px 0 5px #222;
}

#Contoh_D {
-moz-box-shadow: -5px -5px 5px 5px #222;
-webkit-box-shadow: -5px -5px 5px 5px #222;
box-shadow: -5px -5px 5px 5px #222;
}

#Contoh_E {
-moz-box-shadow: 0 0 5px #222;
-webkit-box-shadow: 0 0 5px #222;
box-shadow: 0 0 5px #222;
}

#Contoh_F {
-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}

Jika agan akan menerapkannya pada kotak Posting maka tambahkan salah satu code CSS pada Code

.Post {
Code CSS yang diinginkan
}

 Misalkan :

.Post {
-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}

Begitu juga dengan penerapan pada Blockquote, footer, sidebar, comment form, seach form, maupun yang lainnya. Tetapi bedanya adalah penempatan code CSS nya, tergantung akan memakainya pada bagian apa.

Sedangkan untuk Inner Shadow ( Bayangan yang ada didalam ) tambahkan saja code inset pada setiap bagian, contoh :

#Contoh_G {
-moz-box-shadow: inset 0 0 5px 5px #222;
-webkit-box-shadow: inset 0 0 5px 5px #222;
box-shadow: inset 0 0 5px 5px #222;

CSS Box Shadow bekerja sempurna pada browser mozilla firefox, untuk browser lain hanya beberapa saja yang dapat berfungsi dengan sempurna. Untuk yang ingin merubah warnanya, Bisa cari code warna di Google. Jika ada yang kurang paham, silahkan ditanyakan dan semoga bermanfaat :)

Courtesy of Miscah

HDCode - Free Website Tutorial

Artikel CSS Box Shadow ini ditulis oleh Huda Cooyz pada hari Sabtu, 10 November 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar. Sudah ada 0 komentar: di postingan CSS Box Shadow