
Kita dapat menambahkan bayangan (Drop Shadow) kedalam elemen HTML dengan menggunakan properti CSS box-shadow. Untuk membuatnya, simaklah tutorial berikut:
Dasar-Dasar Menambahkan 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 ID dari elemen
tersebut:
/* offset-x | offset-y | warna */
#kotak1 {
box-shadow: 6px 12px red;
}

Offset bertanggungjawab untuk peletakkan 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 ketiga 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;
}

Menggabungkan Bayangan dalam Satu Property
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
bonus.css<blockquote> <q>Man Jadda Wajada.</q>
<p>— Mahfudzot</p> </blockquote>
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 dan tentunya lebih menarik.
Kalian dapat bereksperimen dengan menggunakan properti tersebut, semoga artikel ini bermanfaat. Terimakasih.
Source Code
Posting Komentar