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 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>

Membuat Efek Bayangan (Box Shadow) pada gambar dengan CSS3
Written by: Oki Helfiska
Rating: 5
I'm Teacher Vocational School in SMK Labor Pekanbaru. I interested in Computer, Networking, Web Design, Blogging and the development of computer education.

Share This Post

Related Articles

5 Responses to “Membuat Efek Bayangan (Box Shadow) pada gambar dengan CSS3”

  1. brugkembar says:

    css3 memang hebat bisa merubah tampilan blog jadi lebih cantik enak dilihat.
    thanks

  2. anak ganteng says:

    makasih mas bro atar artikelnya….

  3. Khocet says:

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

  4. cahboy says:

    Ternyata emang ga semua device suport z gan

    aq mau pasang di tampilan mobile,ternyata ga bisa ?

  5. chiko says:

    simple juga caranya ya.. trims infonya, saya mau coba praktekan

Leave a Reply

Powered by WordPress · Powered by SEO