Menambahkan Efek Bayangan Pada Gambar Menggunakan CSS

Menambahkan Efek Bayangan Pada Gambar Menggunakan CSS – Pada tutorial ini akan membahas bagaimana cara menambahkan efek bayangan pada gambar menggunakan CSS. Kalian cukup membuat dua file dengan nama index.html dan style.css. Penambahan efek bayangan pada gambar dilakukan menggunakan box-shadow.

Cara penggunaan dari properti box-shadow adalah sebagai berikut.

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];

Implementasi untuk menambahkan efek bayangan pada gambar menggunakan css dapat dilihat pada file style.css berikut.

.container{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 500px;
	height: 350px;
}

.container img{
	width: 100%;
	height: 100%;
}

.container::after{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	box-shadow: 10px 10px 20px black;
}

.container:hover:after {
  box-shadow: none;
}

Untuk menampilkan hasilnya, berikut file index.html: (Kalian dapat mencoba langsung dengan menyalin style.css dan index.html)

<!DOCTYPE html>
<html>
<head>
	<TITLE>Efek Vignette</TITLE>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<img src="https://images.freeimages.com/images/large-previews/07a/beach-soft-light-1379401.jpg" alt="gambar 1">
	</div>
</body>
</html>

Kalian akan mendapatkan hasil seperti gambar berikut.

Inpows- Menambahkan Efek Bayangan pada citra menggunakan CSS

Jelajah tutorial menarik lainnya hanya di inpows