Membuat Box Shadow dengan CSS

Membuat Box Shadow dengan CSS

—

by

Webbiz.ID
in

Berikut adalah contoh Membuat Box Shadow dengan CSS

Pertama buat CSS nya:

CSS
.box {
  width: 200px;
  height: 200px;
  position: absolute;
  text-align: center;
  background-color: #800000;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
}
CSS

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:

HTML
<div class="box"></div>
HTML

Outputnya :

HTML
<!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>
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!

Artikel Terbaru ⭐