Bayangan (Shadow) Pada Gambar – HTML & CSS

Hiasi Gambar Dengan Tambahan Bayangan

Di HTML CSS kita dapat menerapkan gambar dan memberikannya bayangan, caranyapun gampang dengan menambahkan kode penampil bayangan yang diarahkan kepada gambar tersebut maka gambar tersebut akan menampilkan bayangan.

Misalnya ada sebuah gambar seperti biasa di tag <img src=””>, kemudian gambar itu ingin diberikan bayangan maka cukup tambahkan code berikut di CSS nya: img {
box-shadow: 5px 5px 5px #333;
}
disesuaikan aja dengan id kalo menggunakan id atau nama class jika menggunakan class.

Lalu apa artinya dari nilai-nilai tersebut ? Bagaimana cara b acanya ?

  • 5px pertama itu merupahan nilai horizontal
  • 5px kedua itu merupakan nilai vertical
  • 5px ketiga itu merupakan tingkat blur bayangan
  • #333 itu merupakan warna hex untuk bayangan

Cukup dengan box-shadow sudah bisa memberikan bayangan pada gambar tersebut, sebetulnya box-shadow bukan hanya untuk gambar saja tapi untuk hal lainnya juga bisa yang sifatnya kotak atau bentuk. Silahkan disimpan dan lihat hasilnya, berhasil !

Masih bingung ? Lihat : Video Tutorial Memberikan Bayangan Pada Gambar di HTML CSS.

Selamat mencoba !

Mau bikin bayangan full seluruh sisi gambar ? Lihat postingan tentang cara memberikan bayangan (shadow) pada semua sisi gambar di HTML CSS.

tunggu sebentar...

POS Lainnya:

Tinggalkan Komentar

avatar

Situs ini menggunakan Cookie untuk meningkatkan pengalaman setiap pengunjung SETUJU & TUTUP Lihat Privasi