Selain warna dan transparansi pada latar belakang, kalian juga bisa memberikan bayangan berbentuk kotak di belakang elemen HTML. Properti yang bisa kalian gunakan untuk memberikan bayangan berbentuk kotak adalah adalah box-shadow. Properti box-shadow menggunakan beberapa nilai sekaligus. Berikut ini adalah syntax penulisan nilai properti box-shadow :
- box-shadow: (none|h-offset) (none|v-offset) (blur) (spread)(color|inset|initial|inherit);
Setiap nilai dalam properti yang menggunakan banyak nilai akan berguna sesuai dengan tempatnya. Jadi, nilai dalam properti box-shadow tidak bisa dibolak-balik posisinya. Supaya lebih jelas, langsung saja kita terapkan dalam kode CSS dan HTML.
.styleku{
width : 100%;
height : auto;
color : blue;
background : yellow;
}
.styleku1{
width : 75%;
height : 200px;
background : green;
box-shadow: 5px 5px #888888;
}
.styleku2{
width : 75%;
height : 200px;
background : white;
box-shadow: 5px 5px 3px 5px #888888;
}Kode HTML-nya bisa kalian buat sendiri. Kalian juga bisa menggunakan kode HTML di bawah ini jika malas mengetik.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<link rel="stylesheet" href="cssku.css">
</HEAD>
<BODY>
<h2>Judul</h2>
<Div class= "styleku">
<div class="styleku1">
<p>ini paragraf 1</p>
<p>ini paragraf 2</p>
<p>ini paragraf 3</p>
<p>ini paragraf 4</p>
</div>
<div class="styleku2">
<p>ini paragraf 5</p>
<p>ini paragraf 6</p>
<p>ini paragraf 7</p>
<p>ini paragraf 8</p>
</div>
</div>
</BODY>
</HTML>
Bayangan pada class style2 menggunakan nilai blur dan spread. Karena itu, nilai yang digunakan lebih banyak. Perbedaan bentuk bayangannya juga cukup terlihat kalau dibandingkan dengan bayangan pada class style1.
Ukuran blur bisa digunakan untuk menentukan radius area yang di-blur, dan spread digunakan untuk menentukan area persebaran bayangan. Ukuran blur dan spread tidak harus ditulis. Kalian cukup menuliskan ofset dan warna bayangan jika kalian tidak menggunakan blur.
Supaya lebih jelas, ubah nilai masing-masing properti dari contoh yang saya berikan dan coba analisa hasilnya.
Multiple Box-Shadow
Selain menggunakan satu bayangan, kalian juga bisa menggunakan bayangan bertingkat. setiap bayangan bisa kalian pisahkan dengan tanda koma.
div{
width:100px;
border:200px;
background:yellow;
box-shadow: 4px 4px 2px red, 8px 8px 2px orange;
}
File HTML-nya copas saja dari contoh sebelumnya. Kalau kalian sudah mengetik file HTML kalian sendiri, pakai saja yang sudah kalian ketik. Cukup ganti CSS-nya seperti contoh di atas.