Bayangan (Shadow) Pada Gambar – HTML & CSS

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 ?

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


Jangan Lupa Share !!!

44
8 shares, 44 points

Apa Reaksimu ?

Bingung Bingung
2
Bingung
Kesal Kesal
10
Kesal
OMG OMG
2
OMG
Takut Takut
1
Takut
Keren Keren
9
Keren
Sedih Sedih
4
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