 |
| 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 berbagai macam efek
tampilan dan fungsi. Sedangkan saat ini hampir seluruh browser telah
compatible dengan CSS3.
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 bagian 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 agar 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 sebenarnya dapat diterapkan pada berbagai objek blog/web yang
berbentuk kotak dan bahkan juga pada objek yang berlekuk, yang dalam
hal ini adalah rounded corners. Untuk mengaplikasikan ke gambar, kita
dapat memasukkannya langsung ke dalam dengan menggunakan atribut style
atau memberikan atribut class dan meletakkan aturan CSS-nya di bagian
lain, baik di bagian HTML posting, widget, atau meletakkannya langsung
sebagai aturan umum untuk semua objek yang diberi class/id yang sama di
bagian head (antara <head> dan </head>).
Contoh pengaplikasiannya:
Salah satu cara yang digunakan untuk
memasukkan kode 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/AVvXsEizQRd880m5c7MVOEQzDXwcQl4mppbszk60tZZFXalnBuyLLLf14KRE8eOJso993PAgBjFdCCw0VrwqGe8q2qKI2q60WnQdMii2Jux7KPXGW5cr4GX3_jHj6QPoPw_RoNOrodMgsoaF7c9e/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 kode CSS ini di bagian 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 memberikan 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 kode warna sesuai
dengan keinginan. Untuk mengetahui koleksi kode 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.
Title : Cara Membuat Efek Bayangan Pada Gambar (CSS3 Box Shadow)
Description : Tips-Tricks Blogger: Browsers compatible with CSS3 Box Shadow Memperindah blog/website kini menjadi hal yang semakin mudah dan merup...