Kembali lagi dengan pelajaran seputar css, dan kali ini saya akan berikan tutorial singkat tentang css box shadow. Box shadow ini dapat sobat gunakan pada kotak postingan, sidebar atau dapat juga sobat gunakan sebagai pemanis dalam artikel blog sobat. Seperti contoh dibawah ini :
Support Firefox, Safari, Chrome, Opera dan IE9
kode css untuk contoh 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.
Berikut 6 contoh css box shadow yang bisa sobat pelajari dan gunakan :
A
|
B
|
C
|
D
|
E
|
F
|
Kode css untuk ke-6 contoh box shadow diatas adalah :
#Contoh_A {
-moz-box-shadow: -5px -5px #222;
-webkit-box-shadow: -5px -5px #222;
box-shadow: -5px -5px #222;
}
-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;
}
-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;
}
-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;
}
-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;
}
-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;
}
-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}
Jika sobat ingin menambahkan box shadow pada kotak postingan sobat, maka cari saja kode seperti di templates sobat :
.Post {…………………………dst
}
kemudian tambahkan salah satu kode diatas sehingga hasilnya kurang lebih akan seperti ini :
.post {……………………;
-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222; }
Bagaimana jika bayangan berada didalam kotak (inner shadow), yang harus sobat tambahkan hanya kode inset pada setiap bagian, contoh :
F
dan kodenya adalah :
#Contoh_F {
-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;
}
-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. Semoga bermanfaat .. tetap belajar ya biar tambah pintar 
Posted by : Keiruchan Agatha ~ / Portal Media Informasi Pilihan
Anda telah membaca artikel Cara Membuat CSS Box Shadow Ditulis oleh Keiruchan Agatha pada Senin, 05 November 2012. Kritik dan saran dapat disampaikan via kotak komentar. Anda diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link yang ada di bawah sebagai sumbernya. Atas perhatiannya saya ucapkan terimakasih. Salam blogger and Happy blogging.
{ 2 komentar... read them below or add one }
Terima kasih sob , sangat bermanfaat :-d
Manteep sob artikelnya :)
Ijin share http://pengobatanalamimustajab.com/cara-alami-mendapatkan-tubuh-langsing-dan-ideal/
Posting Komentar
Silahkan tinggalkan komentar anda dengan tidak meninggalkan link. Jika ada kesalahan dalam artikel ini dan jika ada saran dan kritik silahkan tulis komentar anda dibawah dengan baik dan sopan... ;)
Dan jika kedapatan link yang mati dalam penempatan software atau game harap beritahukan agar segera diperbaiki...