Kamis, Desember 08, 2011
Cara Membuat Tepi Gambar Bershadow Dengan CSS 3 | Cirebon-Cyber4rt - CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3 ini.
Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.
Setelah Log In ke blogger pada dashboard masuk pada bagian "Template" lalu ke "Edit HTML"
Lalu cari code CSS yang mirip dibawah ini
.post img {
- - -
- - -
}
Note :
Nah yang diganti adalah code CSS yang berwarna hijau saja. Kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome. Sekian semoga bermanfaat.
- Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
- Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {
Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini
.post img {background:#FFFFFF;border:1px solid $bordercolor;padding: 7px;-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);}
20 comments:
tak cobain dulu masbro
visit back ya gan ,nice posting :)
Wah,makin keren aja blog n triknya :D
@Wahid Sahidu: monggo gan... :)
@asrofi17: ok gan :D
@Wirang geni: makasih gan :)
wadaw.. klo ini sih perlu dicoba di blog ane..hhhe
mantaps ini infonya gan
:D
"pucuk dicinta ulam pun tiba" kebetulan sekali sob gw lagi pengen nambahin efek shadow pada blog gw,,nice postnya dah.izin baca baca dulu gw untuk lebih lanjut.hheee.:D
Nice tips gan, Followback Sukses,. saya rasa #356 gan, tapi gambar R7 nya nggk muncul. mungkin dibelakang gan, hehehe. Tipsnya menarik dan patut di uji coba,...
Keren sob ane praktek dlu yah
keren sob. terus berkarya :D
w dah pernah coba sob,cuma kayanya kurang pas tampilanya
wahh keren tuh sob,, heheh,, ntar ane coba ahh,, thx sharenya,, :)
Hello, I visit and give your full support and please support me back. Thank you in advance.
@WAYAN GERDIAN: monggo gan hehehe... :)
@Ageboy: siip gan, lanjutkan :D
@Remix-7: sudah muncul gan, thanks ya... :)
@Abi Says Drunk: Monggo gan... :D
@Sadeva Aldy Pratama: ok, thanks atas supportnya :)
@Andy: mungkin harus diedit lagi gan biar pas... :)
@katils: hahaha...
@Rama88: siip gan, sama-sama gan :D
@GLace TIng: Ok, i will support you back :)
u are welcome.
wah ijin nyimak ya sob.....ane juga pgn belajar yang kek gini,thx for share^_^
@B_Riot: siip gan, sama-sama :)
Thx dah berbagi ilmux.., tp bisa gk sharing juga cara membuat scroll bar kyk pnya blog ini.., warna ijo.., mantap gan *smile
Nambah ilmu lagi. thanks gan
makasih mastha :D
Rohis: sama-sama gan, ok ntar ane share deh gan :)
flashreload: hehe siip :)
gєηєяαѕι тєкηιк ιηƒσямαтιкα: sama -sama sob :)
kasih template yg agan pake di blog ini dong
mau coba ni saya
Posting Komentar