Membuat Efek Bayangan (Box Shadow) pada gambar dengan CSS3
Sejak kehadiran CSS3 di dunia web design, kita diberi kemudahan untuk melakukan modifikasi style pada tampilan halaman web. Biasanya untuk memberikan efek bayangan pada gambar atau kotak, kita harus memberikannya dengan photoshop atau aplikasi pengolah gambar lainnya.
Jika anda perhatikan gambar dibawah ini, manakah gambar yang tidak diedit dan diberikan efek bayangan melalui photoshop?
 |
 |
Penerapan CSS3 sampai saat ini, baru bisa dilihat hanya jika anda menggunakan web Browser . Untuk mengujinya silahkan gunakan browser tersebut.
Bagaimana Penerapannya ?
Tambahkanlah kode css berikut ini kedalam dokumen anda, atau sisipkan kedalam file css anda.
<style type="text/css">
.efekbayang{
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>
Lalu sisipkan css kedalam tag image anda.
<img src="gambar.jpg" class="efekbayang" />
Lakukan modifikasi terhadap css anda. Sebagai pengetahuan bahwa untuk membuat efek bayangan, syntax css yang digunakan adalah box-shadow. Adapun penulisan syntax secara lengkapnya adalah sbb :
box-shadow: <horizontal> <vertical> <blur> <color>
Keterangan :
- Horizontal: Nilai untuk menentukan panjang bayangan secara horizontal. Jika sebuah nilai berisi angka positif (yaitu: 10px) akan membuat bayangan di sebelah kanan kotak sebesar 10px, sedangkan bernilai negatif (yaitu:-10px) maka akan memberikan bayangan disebelah kiri.
- Vertical: Nilai untuk menentukan panjang bayangan secara vertikal. Jika nilai berisi positif (yaitu: 10px) akan membuat bayangan di bagian bawah kotak, sedangkan nilai negatif (yaitu:-10px) akan memberikan bayangan disebelah atas.
- Blur: Pengaturan penyebaran / blur radius. Nilai default adalah 0, yang berarti tidak ada blur. Nilai positif berarti meningkatkan kabur, sedangkan nilai negatif berati menyusutkan bayangannya.
- Color: Pengaturan warna bayangan.
Jadi CSS diatas bisa ditambahkan lagi efek blur dengan merubah kodenya menjadi :
<style type="text/css">
.efekbayang{
box-shadow: 5px 5px 10px #818181;
-webkit-box-shadow: 5px 5px 10px #818181;
-moz-box-shadow: 5px 5px 10px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
}
</style>
Hasilnya akan menjadi seperti ini :
Jika Offsetnya kita atur menjadi nilai negatif, maka hasilnya akan menjadi seperti gambar dibawah :
<style type="text/css">
.efekbayang{
box-shadow: -5px -5px 10px #818181;
-webkit-box-shadow: -5px -5px 10px #818181;
-moz-box-shadow: -5px -5px 10px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=-5, offY=-5, positive=true);
}
</style>
5 Comments