Cara Membuat Efek Bayangan Pada Gambar (CSS3 Box Shadow)

Tips-Tricks Blogger: Browsers compatible with CSS3 Box Shadow

Memperindah blog/website kini menjadi hal yang semakin mudah dan merupakan kebutuhan bagi setiap web designer dan developer. Keberadaan CSS3 memungkinkan kita untuk membuat banyak sekali macam efek tampilan dan fungsi. Sedangkan ketika ini hampir seluruh browser telah compatible dengan CSS3.

Pada awal posting ihwal CSS3 ini, gua akan mempresentasikan penggunaan CSS3 Box Shadow pada gambar untuk memunculkan efek bayangan (image shadow). Basic penggunaan CSS3 Box shadow ialah dengan menggunakan syntax:

box-shadow: h-shadow v-shadow blur spread color inset;

h shadow: posisi dan besar bayangan horizontal

v shadow: posisi dan besar bayangan vertical

blur: besaran dan jarak blur (opsional)

spread: ukuran bayangan (opsional)

inset: aturan yang ditambahkan untuk mengubah bayangan jatuh ke bab dalam objek (opsional)

Contoh:

(Biasanya aturan yang lazim digunakan tidak menggunakan spread dan inset)
box-shadow: 5px 5px 3px #666666;

Aturan di atas sangat lah sederhana, pada prakteknya kita harus menambahkan property lain supaya compatible dengan browser-browser lainnya (yang berplatform webkit dan moz). Maka property lengkapnya adalah:

-webkit-box-shadow: 5px 5px 3px #666666;
-moz-box-shadow: 5px 5px 3px #666666;
box-shadow: 5px 5px 3px #666666;

Efek bayangan Box Shadow ini gotong royong dapat diterapkan pada banyak sekali objek blog/web yang berbentuk kotak dan bahkan juga pada objek yang berlekuk, yang dalam hal ini ialah rounded corners. Untuk mengaplikasikan ke gambar, kita dapat memasukkannya pribadi ke dalam dengan menggunakan atribut style atau menunjukkan atribut class dan meletakkan aturan CSS-nya di bab lain, baik di bab HTML posting, widget, atau meletakkannya pribadi sebagai aturan umum untuk semua objek yang diberi class/id yang sama di bab head (antara <head> dan </head>).

Contoh pengaplikasiannya:

Salah satu cara yang digunakan untuk memasukkan isyarat CSS3 Box Shadow-nya:

Tambahkan class pada tag html gambar dan beri aturan CSS3 Box shadow yang sesuai dengan classnya. Contoh:

<img class="boxshadow" border="0" class="bayang2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0waeYaXBQ9yP9gNascvpJZIGuT5pXh-AbBFGE0nlZio5nI1CLdP9gXpp5TCuvKVdD6-nKaBQYXI6w8NSOeKoGhApeTIVpTuaw6CHzirU736OB0nAqAYu0cj1RRKk6tKe02fr_Md0ZwAMk/s1600/anti_copycats-pencuri+konten.jpg" />

Untuk membuat efek bayangan box shadow pada blog anda:
Masuk ke dashboard > design/rancangan > Edit HTML (untuk Blogger), kemudian masukkan isyarat CSS ini di bab head, lebih tepatnya di ATAS </head>, dan save template.

<style type="text/css">
.boxshadow {-webkit-box-shadow: 5px 5px 3px 0px #666666;-moz-box-shadow: 5px 5px 3px 0px #666666;box-shadow: 5px 5px 3px 0px #666666;}</style>

Kemudian setiap anda ingin menunjukkan efek bayangan (image shadow) pada gambar di posting, sidebar widget yang bergambar, tinggal tambahkan class="bloxshadow" pada tag HTML image-nya:

<img class="boxshadow" border="0" src="http://urlgambar.com/gambar.jpg" />

Kostumisasi efek bayangan:

a. Anda dapat mengubah nilai h shadow, v shadow, dan blur (dalam px) serta isyarat warna sesuai dengan keinginan. Untuk mengetahui koleksi isyarat warna silahkan lihat Hex Color Code Generator.

b. Untuk mengubah efek bayangan jatuh ke kiri, gunakan nilai negatif (-) pada h shadow dan v shadow, contoh:

-webkit-box-shadow: -5px -5px 3px #666666;
-moz-box-shadow: -5px -5px 3px #666666;
box-shadow: -5px -5px 3px #666666;

Hasilnya:

Coba terus dan silahkan bereksperimen dengan nilai vertical, horizontal, blur, dan warna, serta efek jatuhnya bayangan.