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 berbagai macam efek tampilan dan fungsi. Sedangkan saat ini hampir seluruh browser telah compatible dengan CSS3.

Pada awal posting tentang CSS3 ini, saya akan mempresentasikan penggunaan CSS3 Box Shadow pada gambar untuk memunculkan efek bayangan (image shadow). Basic penggunaan CSS3 Box shadow adalah 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 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="http://1.bp.blogspot.com/-16LfUz0Nkso/TfyGoinAMnI/AAAAAAAAAiY/eSm1uq11meA/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.

Happy Blogging!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Membuat Efek Bayangan Pada Gambar (CSS3 Box Shadow)
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 14 Comment(s):

OEN-OEN said...

wah kesulitan bang klo aq memakai kayak gini, pake WLW gampang dah klo mau refleksi ato macem2,hehe..


btw bang ada award nih, silahkan diambil di tempatku, no:10, thanx : http://jalanjalandingin.blogspot.com/2011/06/bagi-bagi-award-buat-sobat.html

Ahmad Khoirul Azmee said...

hehehe, pecinta WLW mah emang udah enak banget, cuz bikin efek macem2 gampang. Tapi saya masih setia nih dengan post editor Blogger sejak dulu kala. cieee....

Waaaahhh, makasih banyak bro! ga nyangka nih, mimpi apa ya aku semalem? oke, segera meluncur kesana bro. Thanks again!

Ahmad Khoirul Azmee said...

@ nata:
Thank you for the compliment. I am surely visiting your blog soon...

Faril said...

kalau untuk membuat efek bayangan seperti yang diterapkan di horizontal menu pada http://blog.bramantya.org/ (ada di bagian atas), gimana ya??

Ahmad Khoirul Azmee said...

@Faril: ada banyak sekali elemen css yang diterapkan... mulai dari image sprite, z-index, box shadow, transition, tranformation, dll. lumayan rumit and itu satu kesatuan. membuatnya butuh banyak trial and error dulu :D

Gamer Mania said...
This comment has been removed by a blog administrator.
Rahmat Hidayat said...

Thank's

JC YMF BLESSING COMMUNITY said...

I LIKE THAT

rhmadd jr said...

mas, kalo mau menambah kan ikon social sperti facebook,twitter bgaimana?
sperti punya kamu
trim's sblm nya

Imam's Blog said...

Thanks, buat infonya !
Mau coba nih !

roeyjinrey said...

nyimak aja gan newbie

Abi talita said...

makasi infonya gan..

Blognya Sahrul said...

bang semua minta tolong follow my blog ya abis baru bikin kemaren nih link nya bang http://sahrul7.blogspot.com/

tolong follow ya

dikyandrean15a said...

mantep mas tutornya , saya lagi ingin mengedit template dan ternyata masuk kesini ^_^

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap