Membuat Efek Bayangan (Box Shadow) pada gambar dengan CSS3

By | 28/06/2010

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 Firefox 3.5, Safari 3.1+ dan Google Chrome. 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 thoughts on “Membuat Efek Bayangan (Box Shadow) pada gambar dengan CSS3

  1. Khocet

    Bermanfaat sekali bagi saya..makasi tas sharenya..saya tunggu karya berikutnya

    Reply
  2. cahboy

    Ternyata emang ga semua device suport z gan

    aq mau pasang di tampilan mobile,ternyata ga bisa ?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *