Pasang iklan Anda di sini.
http://goo.gl/ad3AU2
> > Cara Membuat Tepi Gambar Bershadow Dengan CSS 3

22 Cara Membuat Tepi Gambar Bershadow Dengan CSS 3

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.


Cara Membuat Tepi Gambar Bershadow Dengan CSS 3

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 :
  1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
  2. 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);}

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.



Artikel Terkait :

22 komentar:

Admin-Wahid Sahidu mengatakan...

tak cobain dulu masbro

asrofi17 mengatakan...

visit back ya gan ,nice posting :)

Wirang geni mengatakan...

Wah,makin keren aja blog n triknya :D

Cirebon-Cyber4rt mengatakan...

@Wahid Sahidu: monggo gan... :)

@asrofi17: ok gan :D

@Wirang geni: makasih gan :)

WAYAN GERDIAN mengatakan...

wadaw.. klo ini sih perlu dicoba di blog ane..hhhe
mantaps ini infonya gan
:D

Ageboy mengatakan...

"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

Remix-7 mengatakan...

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,...

Abi Says Drunk mengatakan...

Keren sob ane praktek dlu yah

Sadeva Aldy Pratama mengatakan...

keren sob. terus berkarya :D

Andy mengatakan...

w dah pernah coba sob,cuma kayanya kurang pas tampilanya

katils mengatakan...

plg males utak-atik html. apalg msalah css. wah nyrah hehe

katils mengatakan...

plg males utak-atik html. apalg msalah css. wah nyrah hehe

Rama88 mengatakan...

wahh keren tuh sob,, heheh,, ntar ane coba ahh,, thx sharenya,, :)

GLace TIng mengatakan...

Hello, I visit and give your full support and please support me back. Thank you in advance.

Cirebon-Cyber4rt mengatakan...

@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.

B_Riot mengatakan...

wah ijin nyimak ya sob.....ane juga pgn belajar yang kek gini,thx for share^_^

Cirebon-Cyber4rt mengatakan...

@B_Riot: siip gan, sama-sama :)

Rohis Facebook mengatakan...

Thx dah berbagi ilmux.., tp bisa gk sharing juga cara membuat scroll bar kyk pnya blog ini.., warna ijo.., mantap gan *smile

flashreload mengatakan...

Nambah ilmu lagi. thanks gan

gєηєяαѕι тєкηιк ιηƒσямαтιкα mengatakan...

makasih mastha :D

Cirebon-Cyber4rt mengatakan...

Rohis: sama-sama gan, ok ntar ane share deh gan :)

flashreload: hehe siip :)

gєηєяαѕι тєкηιк ιηƒσямαтιкα: sama -sama sob :)

LSR_Dhimaz_NAD mengatakan...

kasih template yg agan pake di blog ini dong
mau coba ni saya

Poskan Komentar

Contact

Nama

Email *

Pesan *