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 {disesuaikan aja dengan id kalo menggunakan id atau nama class jika menggunakan class.
box-shadow: 5px 5px 5px #333;
}
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 !
Baca Juga:
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.