Berikut adalah contoh Membuat Box Shadow dengan CSS
Pertama buat CSS nya:
.box {
width: 200px;
height: 200px;
position: absolute;
text-align: center;
background-color: #800000;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
}Kode di atas akan membuat sebuah kotak dengan lebar dan tinggi 200 piksel, dengan background merah maroon (#00000). Efek box shadow akan memberikan kesan bayangan pada kotak.
Penjelasan singkat tentang properti yang digunakan:
box-shadow: Properti ini digunakan untuk menambahkan efek bayangan pada elemen. Nilai yang diberikan terdiri dari beberapa komponen, yaitu offset-x, offset-y, blur radius, spread radius, dan warna bayangan. Dalam contoh di atas, kita menggunakan nilai 0px untuk offset-x dan offset-y, 10px untuk blur radius, dan rgba(0, 0, 0, 0.2) untuk warna bayangan.
Untuk mengimplementasikan efek box shadow ke dalam elemen HTML, kita dapat menggunakan kode berikut:
<div class="box"></div>Outputnya :
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
position: absolute;
text-align: center;
background-color: #800000;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>See the Pen Membuat Box Shadow dengan CSS by WebbizID (@De-Orchids) on CodePen.
Kode di atas akan membuat sebuah div dengan class “box” yang akan menerapkan efek box shadow yang telah kita definisikan di CSS.
Anda dapat menyesuaikan nilai-nilai dalam kode CSS sesuai dengan kebutuhan Anda untuk menciptakan efek bayangan yang diinginkan. Selamat mencoba!
Leave a Reply