Blog

CSS membuat Box Shadow Lengkap (Atas, Kiri, Bawah dan Kanan)

 

CSS membuat Box Shadow Lengkap (Atas, Kiri, Bawah dan Kanan)

CSS     5 bulan yang lalu


Membuat tampilan berbayang pada sebuah objek HTML menggunakan CSS sangat mudah.

Untuk membuatnya pertama-tama kita siapkan dulu CSS untuk masing-masing posisi box shadow nya.

<style>
  .box {
    height: 150px;
    width: 300px;
    margin: 20px;
    border: 1px solid #ccc;
  }
  
  .top {
    box-shadow: 0 -5px 5px -5px #333;
  }
  
  .right {
    box-shadow: 5px 0 5px -5px #333;
  }
  
  .bottom {
    box-shadow: 0 5px 5px -5px #333;
  }
  
  .left {
    box-shadow: -5px 0 5px -5px #333;
  }
  
  .all {
    box-shadow: 0 0 5px #333;
  }
</style>

Ok selanjutnya kita tinggal panggil class nya aja. Misalkan kita ingin membuat shadow hanya untuk bagian bawah saja.

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

atau mau buat kiri dan kanan bisa seperti ini.

<div class="box left right"></div>

Sangat mudah ya. Kalau project website menggunakan metode templating bisa ditempatkan di master untuk bisa diakses di setiap section template-nya. Semoga bermanfaat