Membuat Efek Image Stack Menggunakan HTML dan CSS – Pada artikel kali ini, kita akan membahas bagaimana membuat efek image stack menggunakan HTML dan CSS. Disini kita akan membuat dua file yaitu satu file dengan nama index.html dan satu file dengan nama style.css. Siapkan gambar yang akan digunakan untuk ditambahkan efek image stack. Perhatikan kedua source code dari file index.html dan sytle.css dibawah ini untuk membuat efek image stack menggunakan HTML dan CSS.

Daftar Isi

Membuat Efek Image Stack Menggunakan HTML dan CSS

Source code style.css

Source style.css untuk membuat efek image stack dapat dilihat sebagai berikut.

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #43658b;
}

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

.img-wrapper{
	width: 100%;
	height: 100%;
	background-image: url("picture.jpg");
	background-size: cover;
	background-position: center;
	box-shadow: 0px 0px 5px 5px rgb(0,0,0,0.3);
	border: 3px solid #fff;
}

.img-wrapper::before, .img-wrapper::after{
	content: "";
	position: absolute;
	border: 3px solid #fff;
	box-shadow: 0px 0px 5px 5px rgb(0,0,0,0.3);
	z-index: -1;
	width: 100%;
	height: 100%;
}

.img-wrapper::before{
	background-color: #0E76A8;
	transform: rotate(-5deg);
}

.img-wrapper::after{
	background-color: #FF0000;
	transform: rotate(4deg);
}

Source Code index.html

Untuk mempermudah, source code untuk file index.html dapat disalin menggunakan kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
	<TITLE>Efek Image Stack</TITLE>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="img-wrapper">
		</div>
	</div>
</body>
</html>

Hasil yang diperoleh

Hasil yang diperoleh akan seperti gambar berikut ini.

Efek Image Stack - Inpows — Efek Image Stack – Inpows

Temukan source code programming lainnya hanya di inpows.