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


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 !


Jangan Lupa Share !!!

73
11 shares, 73 points

Apa Reaksimu ?

Bingung Bingung
6
Bingung
Kesal Kesal
4
Kesal
OMG OMG
6
OMG
Takut Takut
5
Takut
Keren Keren
3
Keren
Sedih Sedih
8
Sedih
Posciety Tech

Advanced Competent

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi. Dikelola oleh tim Posciety Tech.

0 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki