Membuat Efek Bayangan Pada Box ( Box Shadows )
CSS3 mendukung sebuah " box-shadow " baru, yaitu properti yang memungkinkan anda membuat suatu bayangan untuk setiap elemen pada halaman site anda, seperti foto, DIVs dan SPANs.
syntax untuk "box-shadow" (kotak-bayangan) ini adalah:
box-shadow: <horizontal> <vertical> <blur> <color>
Keterangan:
- Horizontal: Ini menentukan horizontal offset bayangan. Sebuah nilai positif (yaitu: 5px) akan membuat bayangan di sebelah kanan kotak, sedangkan nilai negatif (yaitu:-10px) akan membuatnya ke kiri.
- Vertikal: Ini menentukan offset vertikal bayangan. Sebuah nilai positif (yaitu: 5px) akan membuat bayangan di bagian bawah kotak, sedangkan nilai negatif (yaitu:-10px) akan membuatnya ke kiri.
- Blur: Sebuah pengaturan untuk menentukan nilai blur radius. Nilai default adalah 0, yang berarti tidak ada blur. Sebuah nilai positif menambah nilai blur radius dan nilai negatif akan menguranginya. Properti ini akan bernilai default "0" jika itu tidak ditentukan.
- Warna: Untuk pengaturan sebuah nilai warna bayangan.
Berikut ini adalah sebuah contoh bayangan pada DIVs dengan offset di kanan bawah tanpa Blur:
<style type="text/css">
.shadow1{
box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px #818181;
-moz-box-shadow: 5px 5px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
}
</style>
<div class="shadow1" style="width:500px; height:50px; padding:5px; background:navy; border: 1px solid black;"> </div>
.shadow1{
box-shadow: 5px 5px #818181;
-webkit-box-shadow: 5px 5px #818181;
-moz-box-shadow: 5px 5px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
}
</style>
<div class="shadow1" style="width:500px; height:50px; padding:5px; background:navy; border: 1px solid black;"> </div>
Contoh yang sama dengan menambahka nilai blur radius 8px:
<style type="text/css">
.shadow2{
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
</style>
<div class="shadow2" style="width:500px; height:50px; padding:5px; background:navy; border: 1px solid black;"> </div>
.shadow2{
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}
</style>
<div class="shadow2" style="width:500px; height:50px; padding:5px; background:navy; border: 1px solid black;"> </div>
Selain itu anda dapat juga menggunakan nilai-nilai RGBA untuk setiap warna bayangan"Box Shadows".
RBGA dapat diterapkan untuk setiap sifat yang terkait dengan warna, seperti warna font, warna border, warna latar belakang, warna bayangan, dll
Tiga nilai pertama dibawah ini adalah nilai-nilai warna RGB dan nilai terakhir adalah tingkat transparansi (0 = transparant dan 1 = blur).
Contoh berikut adalah daftar tiga deklarasi box-shadow.
-moz-box-shadow: -2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);
sumber: dynamicdrive
){kind=link}
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon