CSS Box Shadow

Onhacker - CSS Box Shadow

Kali ini gw mau kasih tutor tentang CSS, yaitu CSS Box shadow seperti yang saya terapkan pada bagian Footer pada blog Onhacker ini :

Dan juga saya terapkan pada Blockquote dan Search Form pada blog ini :

CSS Box Shadow juga saya terapkan di kotak komentar pada blog ini, silahkan di lihat saja sendiri :D . Dan sebenarnya banyak sekali CSS Box Shadow yang saya terapkan pada Bllog ini. Pokona mah intinya ini tutorial sangat bermanfaat bagi saya :)

Yuk cekidot, langsung aja ke Tutornya ;)

Tutorial CSS Box Shadow by Huda-Cooyz Onhacker-Crew, Support Firefox, Safari, Chrome, Opera dan 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. Code HTML Colornya bisa dilihat disini .

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, silahkan lihat Code warna disini. Jika ada yang kurang paham, silahkan ditanyakan dan semoga bermanfaat :)

Courtesy of Miscah

Onhacker-Crew 

Penulis : Huda Cooyz ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel CSS Box Shadow ini dipublish oleh Huda Cooyz pada hari Senin, 18 Juni 2012. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 4 komentar: di postingan CSS Box Shadow