Bayangan (Shadow) Pada Gambar – HTML & CSS

Hiasi Gambar Dengan Tambahan Bayangan

0

Pada HTML CSS, kita dapat menampilkan gambar / image. Gambar yang ditampilkan dapat dihiasi dengan shadow / bayangan, ini membuatnya lebih menarik. Tidak hanya gambar, bayangan pun dapat diterapkan pada semua media dan/atau bidang yang ada.

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 ?

ads by posciety

  • 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.

Artikel Lainnya
Komentar

Email kamu tidak akan dibagikan kepada siapapun

Website ini menggunakan cookie untuk pengalaman yang lebih baik Setuju & Tutup Selengkapnya