MAGANG KERJA DI JEPANG GAJI 20 JUTA!
http://bit.ly/MagangJepang2019
> > 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:

Unknown mengatakan...

tak cobain dulu masbro

asrofi17 mengatakan...

visit back ya gan ,nice posting :)

Wirang geni mengatakan...

Wah,makin keren aja blog n triknya :D

Muhammad Iqbal K mengatakan...

@Wahid Sahidu: monggo gan... :)

@asrofi17: ok gan :D

@Wirang geni: makasih gan :)

632 mengatakan...

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

oM Boy 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

ADMIN BB 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

Aldy mengatakan...

keren sob. terus berkarya :D

Unknown mengatakan...

w dah pernah coba sob,cuma kayanya kurang pas tampilanya

Unknown mengatakan...

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

Unknown mengatakan...

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

Rama Saputra Zylgwyne mengatakan...

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

WiTeD mengatakan...

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

Muhammad Iqbal K 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.

bagreg santoso mengatakan...

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

Muhammad Iqbal K mengatakan...

@B_Riot: siip gan, sama-sama :)

Unknown 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

-=[./GENETIK]=- mengatakan...

makasih mastha :D

Muhammad Iqbal K mengatakan...

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

flashreload: hehe siip :)

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

Dhimas Rehack mengatakan...

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

Posting Komentar

Contact

Nama

Email *

Pesan *