Properti box-shadow memberikan ilusi ketinggian 3D (elevation) yang sangat penting dalam desain UI modern.
CSS Shadows
Contoh Kode CSS Shadows:
<!DOCTYPE html>
<html>
<head>
<style>
.kartu-bayangan {
background: white;
padding: 25px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(13, 46, 92, 0.15);
max-width: 320px;
font-family: sans-serif;
text-align: center;
}
.teks-bayangan {
color: #0d2e5c;
text-shadow: 2px 2px 4px rgba(0,0,0,0.25);
}
</style>
</head>
<body>
<div class="kartu-bayangan">
<h3 class="teks-bayangan">Kartu Berelevasi</h3>
<p>box-shadow: 0 10px 25px rgba(13, 46, 92, 0.15)</p>
</div>
</body>
</html>
Uji dan amati bagaimana deklarasi CSS CSS Shadows mengubah tampilan elemen di atas.