Box Shadow di CSS: Code Properti dan Cara Membuatnya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti October 5, 2020

Properti CSS box-shadow

Properti CSS box-shadow berfungsi untuk menerapkan bayangan ke elemen.

Dalam penggunaannya yang paling sederhana, kita tentukan bayangan horizontal dan bayangan vertikal:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: yellow;
  box-shadow: 10px 10px;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>div elemen dengan box-shadow</div>

</body>
</html>

Selanjutnya, tambahkan warna pada bayangan:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: yellow;
  box-shadow: 10px 10px grey;
}
</style>
</head>
<body>

<div>div elemen dengan box-shadow</div>

</body>
</html>

Kemudian, tambahkan efek buram ke bayangan:

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  padding: 15px;
  background-color: yellow;
  box-shadow: 10px 10px 5px grey;
}
</style>
</head>
<body>

<div>div elemen dengan box-shadow</div>

</body>
</html>

Cards

Kita bisa menggunakan properti box-shadow untuk membuat kartu(card) seperti kertas:

Contoh :

Text Card

<!DOCTYPE html>
<html>
<head>
<style>
div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.header {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  font-size: 40px;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>

<h2>Cards</h2>

<p>properti box-shadow untuk membuat kartu(card) seperti kertas:</p>

<div class="card">
  <div class="header">
    <h1>1</h1>
  </div>

  <div class="container">
    <p>January 1, 2016</p>
  </div>
</div>

</body>
</html>

Image Card

<!DOCTYPE html>
<html>
<head>
<style>
div.polaroid {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

div.container {
  padding: 10px;
}
</style>
</head>
<body>

<h2>Polaroid Images / Cards</h2>

<p>Tproperti box-shadow untuk membuat kartu(card) seperti kertas</p>

<div class="polaroid">
  <img src="https://dosenit.com/wp-content/uploads/2020/10/img_car.jpg" alt="car" style="width:100%">
  <div class="container">
    <p>This is My Car</p>
  </div>
</div>

</body>
</html>

CSS