Hari ini k'ian sama sekali tidak berniat memposting sebuah artikel di blog kesayangan k'ian ini, namun sebuah artikel dari Dynamic Drive menggugah hati k'ian untuk menulis dan membagikannya kepada sobat sekalian. Sesuai dengan tema yang k'ian buat yakni Modifikasi tampilan Image dengan efek shadow / bayangan, fokus utama kita sudah pasti mengenai Image atau gambar.
Kalau pada postingan yang lalu k'ian buat "Efek zoom pada gambar dengan jQuery magnify", dimana pada postingan tersebut k'ian menggunakan script JQuery untuk membuat efek zoom pada gambar pada saat diklik. Pada postingan kali ini k'ian akan menggunakan format CSS code untuk membuat efek bayang pada gambar atau memberi kesan bayangan pada gambar yang kita pasang-sehingga tampilannya menjadi sedikit lebih menarik.
Sebagai contohnya bisa kamu lihat dibawah ini :
Pada gambar pertama ini k'ian akan memasang sebuah gambar dengan tampilan yang original
Pada gambar yang kedua k'ian telah menambahkan efek bayangannya, lihat dibawah ini :
Jika kamu sudah cukup paham dengan yang k'ian maksud, kita langsung menuju scriptnya :
Kalau pada postingan yang lalu k'ian buat "Efek zoom pada gambar dengan jQuery magnify", dimana pada postingan tersebut k'ian menggunakan script JQuery untuk membuat efek zoom pada gambar pada saat diklik. Pada postingan kali ini k'ian akan menggunakan format CSS code untuk membuat efek bayang pada gambar atau memberi kesan bayangan pada gambar yang kita pasang-sehingga tampilannya menjadi sedikit lebih menarik.
Sebagai contohnya bisa kamu lihat dibawah ini :
Pada gambar pertama ini k'ian akan memasang sebuah gambar dengan tampilan yang original
Jika kamu sudah cukup paham dengan yang k'ian maksud, kita langsung menuju scriptnya :
Copy kode diatas, kemudian masuk kedalam account blog kamu -->> klik menu layout -->> Edit HTML -->> jangan lupa klik "expand widget template" -->> paste kode tadi diatas kode ]]></b:skin>-->> kemudian simpan..shadow{box-shadow: 8px 8px 10px #424242;-webkit-box-shadow: 8px 8px 10px #424242;-moz-box-shadow: 6px 6px 10px #424242;filter: progid:DXImageTransform.Microsoft.dropShadow(color=#424242, offX=8, offY=8, positive=true);}
Langkah selanjutnya adalah penerapan pada Image atau gambar, ambil sebuah url gambar, contoh :
<img src="http://i317.photobucket.com/albums/mm393/d_otherside_band/header.jpg">Kemudian tambahkan kode class="shadow" didalamnya, maka hasilnya akan seperti ini :
<img src="http://i317.photobucket.com/albums/mm393/d_otherside_band/header.jpg" class="shadow">Selanjutnya simpan, dan lihat hasilnya
Nb : Pada contoh gambar diatas efek bayang berada di sebelah kanan dan bawah, sedangkan untuk merubah efek bayangnya disamping kiri dan atas. kamu cukup merubah kode CSS dan menambahkan tanda "min" (-) pada angkanya, contohnya sebagai berikut :
hasilnya seperti ini :.shadow{box-shadow: -8px -8px 10px #424242;-webkit-box-shadow: -8px -8px 10px #424242;-moz-box-shadow: -6px -6px 10px #424242;filter: progid:DXImageTransform.Microsoft.dropShadow(color=#424242, offX=-8, offY=-8, positive=true);}
pertamax gan!! Ane duluan..
Mantep ni tips kek.a. Coba dulu ...Replay
@ Sonic : Yoi sob...silahkan dicoba deh...!! ...Replay
gambarnya jd lebih asik dg tips ini .. ...Replay
tp kok kyk g ad bda y? ...Replay
@ aan : emang bener sob,pasti lbh menarik...!!!
@ Sonic : coba periksa lagi deh kodenya ada yg kurang apa nggak...??? ...Replay
wih keren mas kian :) musti di coba tuh ...kan blog ku banyak gambar nya :) kayanya lebih menarik...hehe ...Replay
kalo css shadow itu untuk css3 sob...kalo browsingan yg skrg blon bs ngefek sempurna...hehehehe
kalo mau shadownya pake gambar...hehehe ...Replay
boleh juga ni, tapi saya jarang ada gambar juga :) ...Replay
boleh juga nih dicobain.!!!! infonya mantabbb... ...Replay
mas, bleh bgi tutor ga cra masang header image??? ...Replay
keren ei.
follow blog saya. ok
http://www.holidaymamboo.com ...Replay
@angga's : Oke sob... ...Replay