Tutorial Menggunakan Box Shadow di Elemen HTML

Diterjemahkan dari Box Shadow CSS Tutorial – How to Add a Drop Shadow to Any HTML Element oleh Joe Liang

Kita bisa menambahkan drop shadow ke semua elemen HTML menggunakan property CSS box-shadow. Baca terus untuk mengetahui caranya.

Menambahkan Drop Shadow Sederhana

Mari kita siapkan elemen HTML sederhana untuk diberikan drop shadow:

<div id="box1" class="box">Box1</div>
<div id="box2" class="box">Box2</div>
<div id="box3" class="box">Box3</div>

Lalu tambahkan CSS:

p {
    padding: 10px;
}
.box {
    padding: 20px;
    width: 50%;
    margin: 30px auto;
    background: #000;
    color: #fff;
}

Hasilnya adalah tiga buah kotak yang akan mempermudah pemberian drop shadow dengan memanggil id dari masing-masing kotak.

Untuk menambahkan drop shadow, mari berikan properti box-shadow ke Box 1:

/* offset-x | offset-y | color */
#box1 {
    box-shadow: 6px 12px yellow;
}

Ada tiga parameter yang kita berikan. Dua parameter pertama adalah offset-x dan offset-y. Keduanya menentukan lokasi drop shadow.

Offset yang diberikan relatif terhadap posisi sudut kiri atas dari suatu elemen. Nilai positif pada offset-x artinya mengarahkan shadow ke kanana dan positif pada offset-y artinya mengarahkan shadow ke bawah.

Parameter ketiga adalah warna drop shadow yang diinginkan.

Meskipun di sini kita menggunakan elemen <div>, properti box-shadow bisa diaplikasikan ke semua elemen HTML lainnya.

Memberikan Blur Radius

Jika ingin agar shadownya terlihat lebih realistis, kita bisa memanfaatkan parameter blur-radius.

Parameter ini akan mengatur bagaimana kita memberikan efek blur pada shadow. Mari aplikasikan pada Box 2:

/* offset-x | offset-y | blur-radius | color */
#box2 {
	box-shadow: 6px 12px 4px red;
}

Perhatikan parameter ketiga, nilai 4px mengatur radius blur yang diaplikasikan pada drop shadow.

Memberikan Spread Radius

Jika ingin mengatur ukuran shadow, kita bisa menambahkan prameter spread-radius yang bisa membuat shadow meluas atau menciut.

Mari tambahkan spread radius sebesar 8px ke Box 2:

/* offset-x | offset-y | blur-radius | spread-radius | color */
#box2 {
    box-shadow: 6px 12px 4px 8px red;
}

Perhatikan urutan parameternya.

Menggabungkan Beberapa Shadow

Kita bahkan bisa menggabungkan beberapa shadow sekaligus ke sebuah elemen.

Mari kita buat Box 3 mengaplikasikan drop shadow biru dan hijau:

/* Berapapun jumlah shadownya, pisahkan dengan koma */
#box3 {
    box-shadow: 6px 12px 2px 2px blue, -6px -12px 2px 2px green;
}

Bonus: Membuat Inset Shadow

Kita bisa membuat sebuah shadow yang mengarah ke dalam dengan parameter inset.

Parameter inset bisa ditulis di awal atau akhir dari properti box-shadow. Berikut ini contoh dengan menggunakan elemen blockquote.

<blockquote>
  <q>The key to success is to start before you're ready.</q>
  <p>— Marie Forleo</p>
</blockquote>

blockquote {
  width: 50%;
  margin: 50px auto;
  padding: 20px;
  font-size: 24px;
  box-shadow: inset 10px 5px black;
}

Kita juga bisa menambahkan beberapa blur dan spread untuk memperabgus shadow:

box-shadow: inset 10px 5px 25px 5px black, 5px 5px 12px 2px black;

Dengan properti box-shadow, kita bisa memberikan shadow pada halaman web yang kita buat sehingga bisa memberikan efek pencahayaan 3D yang bagus.

Beriut CodePen yang bisa pembaca lihat untuk bereksperimen.