Tutorial CSS Box Shadow - Cara Menambahkan Bayangan pada Elemen HTML

Kita dapat menambahkan bayangan (Drop Shadow) kedalam elemen HTML dengan menggunakan properti CSS box-shadow. Untuk membuatnya, simaklah tutorial berikut:

Menggunakan CSS Drop Shadow

Pertama-tama, mari kita buat elemen HTML dasar:

<div id="kotak1" class="kotak" id="kotak1">Kotak 1</div>
<div id="kotak2" class="kotak">Kotak 2</div>
<div id="kotak3" class="kotak">Kotak 3</div>

Kemudian, tambahkan CSS dasar:

p {
    padding: 10px;
}

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

Hasilnya hanyalah tiga buah kotak berwarna hitam yang nantinya dapat kita tambahkan bayangan dengan memanggil masing-masing selector id dari elemen tersebut:

Untuk menambahkan Drop Shadow/Bayangan dasar, mari kita tambahkan properti CSS box-shadow pada elemen Kotak 1 yang memiliki id kotak1:

/* offset-x | offset-y | warna */
#kotak1 {
    box-shadow: 6px 12px red;
}

Disini, kita memiliki 3 parameter. Parameter pertama (6px) adalah offset-x dan paremeter ke-dua (12px) adalah offset-y yang berfungsi untuk mengatur lokasi atau posisi dari Drop Shadow.

Offset bertanggungjawab untuk peletakkan atau posisi yang mana HTML selalu memulainya dari pojok kiri atas dari setiap elemen. Offset-x akan memindahkan bayangan ke kanan, dan offset-y akan memindahkan elemen ke bawah.

Parameter ke-tiga (red) adalah warna dari Drop Shadow.

Perlu diingat bahwa disini kita hanya menggunakan elemen <div>, properti box-shadow juga dapat dimasukkan kedalam elemen lainnya.

Menambahkan Blur Radius

Jika kita ingin membuat bayangan menjadi lebih realistis, kita dapat bereksperimen dengan parameter blur-radius.

Parameter tersebut dapat mengontrol seberapa banyak Blur dari bayangan. Sekarang, mari kita tambahkan blur kedalam Kotak 2:

/* offset-x | offset-y | blur-radius | spread-radius | warna */
#kotak2 {
    box-shadow: 6px 12px 4px green;
}

Menambahkan Spread Radius

Jika kita ingin mengontrol ukuran dari bayangan, kita dapat menggunakan parameter spread-radius yang berfungsi untuk memperluas bayangan.

Sekarang, mari kita tambahkan spread-radius: 8px kedalam Kotak 2:

/* offset-x | offset-y | blur-radius | spread-radius | warna */
#kotak2 {
    box-shadow: 6px 12px 4px 8px green;
}

Kalian perlu mengingat urutan dari parameter diatas.

Menggabungkan Bayangan dalam Satu Properti

Jika kalian ingin membuat hal yang lebih aneh dan unik, kalian dapat menambahkan beberapa Drop Shadow kedalam elemen dengan menggunakan satu properti box-shadow.

Mari kita gabungkan pada Kotak 3 dengan menambahkan Drop Shadow berwarna hijau dan biru:

/* Berapapun jumlah bayangan harus dipisahkan dengan koma */
#kotak3 {
    box-shadow: 6px 12px 2px 2px green, -6px -12px 2px 2px blue;
}

Membuat Inset Shadow

Parameter inset juga dapat kita gunakan dengan properti box-shadow.

Sama seperti namanya, parameter tersebut berfungsi untuk membuat Inset Shadow (Bayangan di bagian dalam).

Parameter inset dapat diletakkan diawal atau diakhir properti box-shadow. Berikut adalah contohnya:

bonus.html

<blockquote>
     <q>Man Jadda Wajada.</q>
     <p>&mdash; Mahfudzot</p>
</blockquote> 

bonus.css

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

Tentu saja kalian dapat menambahkan blur dan spread kedalam elemen tersebut, contoh:

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

Dengan menggunakan properti box-shadow, kita dapat membuat elemen pada halaman web menjadi terlihat 3D (3 Dimensi) dan tentunya lebih menarik.

Kalian dapat bereksperimen dengan menggunakan properti tersebut, semoga artikel ini bermanfaat. Terimakasih.

Source Code