Make Image More Fancy With RGBA Effect

Kali ini si bloglang Beben ganteng kalem mau sedikit berbagi mengenai memberikan efek shadow pada gambar yang ada di bagian postingan template sobat :) Disini sobat bisa nemuin property dari dasar apa-apa saja yg dapat dipakai untuk sebuah image w3.org. Kali ini tepatnya Beben mau membahas pada level ini w3.org. Yah pada sesi shadows dengan sentuhan lainnya agar efek pada gambar terlihat fancy b-)

Dalam keadaan normal gambar tanpa embel-embel apapun akan tampak sebagai berikut...

Dengan sedikit sentuhan efek CSS3, sobat akan bisa menghasilkan yg kayak beginih...

So...fancy bukan :))

Cari kode gambar (img) pada template sobat! Ini bisa berbeda pada setiap template. Biasanya menggunakan kode img, post img, body img atau apapun. Pokoknya img yg ada pada bagian body post. Setelah ketemu kodenya tambahkan kode CSS berikut ini [..]

img {
padding:8px;
background: #FFFFCC;
border: 1px solid #c8c8c8;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .3);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .3);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

Jika efeknya tidak muncul, berarti browsingan sobat belum support :D Untuk mengetahui lebih jelas mengenai efek RGBA ini, sikat brooo:

• css3.info
• For A Beautiful Web
• CSS-Tricks
• Wikipedia
• Wassalam