Cara Menghasilkan Dampak Bayangan Pada Gambar (Css3 Box Shadow)

Tips-Tricks Blogger: Browsers compatible with CSS3 Box Shadow

Memperindah blog/website sekarang menjadi hal yang kian mudah dan ialah keperluan bagi setiap web designer dan developer. Keberadaan CSS3 memungkinkan kita untuk menghasilkan aneka macam macam pengaruh performa dan fungsi. Sedangkan di sekarang ini nyaris seluruh browser sudah compatible dengan CSS3.

Pada permulaan posting wacana CSS3 ini, aku akan mempresentasikan penggunaan CSS3 Box Shadow pada gambar untuk menimbulkan pengaruh bayangan (image shadow). Basic penggunaan CSS3 Box shadow yakni 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: hukum yang disertakan untuk merubah bayangan jatuh ke bab dalam objek (opsional)

Contoh:

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

Aturan di atas sungguh lah sederhana, pada prakteknya kita mesti menyertakan property lain biar compatible dengan browser-browser yang lain (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 bahwasanya sanggup dipraktekkan pada aneka macam objek blog/web yang berupa kotak dan bahkan juga pada objek yang berlekuk, yang dalam hal ini yakni rounded corners. Untuk mengaplikasikan ke gambar, kita sanggup memasukkannya eksklusif ke dalam dengan menggunakan atribut style atau memamerkan atribut class dan menaruh hukum CSS-nya di bab lain, baik di bab HTML posting, widget, atau meletakkannya eksklusif selaku hukum lazim untuk semua objek yang diberi class/id yang serupa di bab head (antara <head> dan </head>).

Contoh pengaplikasiannya:

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

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

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

Untuk membuat pengaruh bayangan box shadow pada blog anda:
Masuk ke dashboard > design/rancangan > Edit HTML (untuk Blogger), lalu masukkan aba-aba 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 memamerkan pengaruh 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 pengaruh bayangan:

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

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