Asalamualaikum warahmatullahi wabarakatuh
Tehknik box-shadow
teknik ini adalah teknik untuk membuat efek bayangan pada elemen HTML.
Untuk kode syntax CSS3-nya sebagai berikut.
box-shadow: [x offset] [y offset] [blur value] [supreadvalue] [color value];
Dari kode syntax diatas akan di jabarkan sebagai berikut.
- X offset adalah nila jarak sumbu x dari tengah element. Jikabernilai postif maka box shadow akan bergeser ke kanan. sedangkan jika nilainya negatif maka box-shadow akan bergeser kekiri.
- Y offset adalah nilai jarak sumbu y dari tengah element. jika bernilai positif maka box-shadow akan bergeser ke bawah. sedangkan jika nilainya negatif maka box-shadow akan bergeser ke atas.
- Blur adalah tingkat kekaburan dari box shadow. Jika nilai yang di berikan semkin besar maka tingkat kekaburan semakin kabur.
- spreat adalah besarnya penyebaran box-shadow dari tengah element.
- Color value adalah kode warna untuk memberikan warna dari box-shadow.
Berikut contoh sederhana dari property box-shadow. Silahkan anda masukan kode CSS berikut untuk mencoba efek yang di hasilkan property box-shadow.
css box-shadow
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Ttransitional//EN"
"http://w3c.org.TRxhtml1/ DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> box sadow </title>
<style>
body{
background:white;
}
#wrapper{
padding: 50px;
}
.shadow1, .shadow2, .shadow3,
.shadow4, .shadow5, .shadow6{
background: #ebebeb;
border: 3px solid #3333333;
margin: 20px;
padding: 20px
width: 150px;
height: 100px;
float: left;
}
.shadow1{
box-shadow: 5px 5px #888;
}
.shadow2{
box-shadow: 5px 5px 5px #888;
}
.shadow3{
box-shadow: 5px 5px 0 5px #888;
}
.shadow4{
box-shadow: -5px -5px 5px 5px #888;
}
.shadow5{
box-shadow: 0 0 10px #888;
}
.shadow6{
box-shadow: 0 0 10px 5px #888;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="shadow1">
<h2> Contoh box shadow 1 </h2>
</div>
<br/>
<div class="shadow2">
<h2> Contoh box shadow 2 </h2>
</div>
<div class="shadow3">
<h2> Contoh box shadow 3</h2>
</div>
<div class="shadow4">
<h2> Contoh box shadow 4 </h2>
</div>
<div class="shadow5">
<h2> Contoh box shadow 5</h2>
</div>
<div class="shadow6">
<h2> Contoh box shadow 6 </h2>
</div>
</div>
</body>
</html>
Syntax diatas akan mengahsilkan tampilan sebagai berikut.
 |
| gambar 1.1 contoh box-shadow. |
Gambar di atas dijabarkan sebagai berikut.
- Pada contoh pertama deberikan efek box-shadow untuk X offset sebesar 5px sehingga bayangan akan bergeser ke-arah kanan bawah. Bayangan juga diberi warna #888 Yaitu warna kelabu tua.
- Contoh yang kedua X dan Y offset dan color value bernilai sama tetapi deberikan efek Blur sebesar 5px.
- Untuk contoh box-shadow yang ketiga nilai X offset, Y offset, dan color value bernilai sama dan blur bernilai nol diberikan nilai spread sebesar 5px.
- selanjutnya contoh keempat nilai X offset, dan color value masih bernilai sama kemudian di berikan nilai -5px sehingga bergeser ke arah kiri atas ditambahkan nilai blur dan spread sebesar 5px.
- Contoh box-shadow yang kelima nilai offset X dan Y bernilai nol dan color value tetap sama tetapi deiberikan nilai Blur sebesar 10px dan tanpa nilai spread.
- Box-shadow yang terahir sama dengan contoh kelima tetapi diberikan nilai spread sebesar 5px.
Sekian dari saya semoga bermanfaat
waslamualaikum warhmatullahiwabarakatuh
Index: buku Teknik Singkat dan Cepat menguasai CSS3
penerbit ANDI Yogyakarta dengan WAHANA KOMPUTER semarang.
+ comments + 2 comments
Artikelnya bagus, bisa berguna buat orang lain dan catatan buat diri sendiri juga. Design blognya mungkin yang perlu disederhanakan sedikit :)
terimakasih ma tiyo atas kunjungannya dan saranya,
sangat bermanfaat. sering-sering berkunjung ya. saya masih butuh banyak masukan dari teman-teman agar blog saya makin maju.
Post a Comment
1. Silahkan komentar dengan sopan.
2. Jangan spam.
3. Boleh komentar menyertakan link tapi tidak aktif.