Membuat Bayangan Gambar Seluruh Sisi (Atas,Kanan,Bawah,Kiri) – HTML CSS

Full Sides Shadows

Tutorial ini melengkapi tutorial sebelumnya tentang membuat bayangan pada gambar – HTML CSS, pada tutorial tersebut hanya membuat bayangan horizontal dan vertical (kanan dan bawah) saja.

Pada tutorial kali ini kita akan membuat bayangan pada gambar untuk seluruh sisi (4 sisi) atas – kanan – bawah – kiri.

Caranya gampang banget, cukup tambahkan code berikut pada tag gambar (img) / tag kotak / tag div / tag semacamnya (box) yang ingin diberikan bayangan:

img {
   box-shadow: 0 0 20px #000;
}

Atau bisa juga ditambahkan deklarasi untuk browser seperti ini:

img {
   -webkit-box-shadow: 0 0 20px #000;
   -o-box-shadow: 0 0 20px #000;
   -moz-box-shadow: 0 0 20px #000;
   -ms-box-shadow: 0 0 20px #000;
   box-shadow: 0 0 20px #000;
}

Ditambahkan deklarasi untuk masing-masing browser, biasanya hanya menggunakan -webkit- saja (untuk Google Chrome tapi sudah dapat dijalankan dihampir semua browser). Kalo kurang puas atau tidak jalan di browser lain bisa ditambahkan yang lainnya (-o- untuk Opera, -moz- untuk Mozilla FireFox, -ms- untuk Safari).

Catatan: box-shadow default tetap harus ditulis, tidak bisa disingkirkan walaupun menggunakan deklarasi.

Cara Baca Nilai Pada CSS

Cara membaca nilai pada CSS diatas diawali dari nilai Horizontal (0), Vertical (0), Blur (20px) dan warna (#000). Tentukan nilai-nilai tersebut sesuai keperluan, tapi untuk membuatnya full bayangan disetiap sisi gambar / kotak maka horizontal dan vertical dikosongkan (0).

Memperluas Jarak Bayangan

Untuk memperluas / memperlebar / membuat bayangan menjadi lebih jauh bisa tambahkan nilai sphread setelah nilai blur, contohnya:

img {
   -webkit-box-shadow: 0 0 20px 10px #000;
   -o-box-shadow: 0 0 20px 10px #000;
   -moz-box-shadow: 0 0 20px 10px #000;
   -ms-box-shadow: 0 0 20px 10px #000;
   box-shadow: 0 0 20px 10px #000;
}

Setelah nilai blur atau sebelum nilai warna terdapat nilai sphread (menebarkan) contohnya 10px artinya jarak tebaran bayangan akan sejauh 10px dari objek.

Masih bingung ? Lihat : Video tutorial cara memberikan shadow setiap sisi bidang HTML CSS.

Nilai-nilai diatas sebagai contoh saja, silahkan sesuaikan dengan nilai-nilai yang diperlukan, misalnya tanpa blur (hanya sphread saja) atau nilai lainnya. Untuk Mozilla FireFox versi 3.5 kebawah biasanya memerlukan deklarasi -moz- sebagai bantuan.

Selamat mencoba !

Lihat Post Lainnya:
Komentar
Memuat...