Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
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 :
.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);}
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.

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 :
.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);}
hasilnya seperti ini :




Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

12 Response to "Modifikasi tampilan Image dengan efek shadow (bayangan)"

  1. MS Ilman Said,

    pertamax gan!! Ane duluan..
    Mantep ni tips kek.a. Coba dulu ...Replay

     

  2. Kian Coi Said,

    @ Sonic : Yoi sob...silahkan dicoba deh...!! ...Replay

     

  3. Unknown Said,

    gambarnya jd lebih asik dg tips ini .. ...Replay

     


  4. Kian Coi Said,

    @ aan : emang bener sob,pasti lbh menarik...!!!

    @ Sonic : coba periksa lagi deh kodenya ada yg kurang apa nggak...??? ...Replay

     

  5. Ezha_cuTe Said,

    wih keren mas kian :) musti di coba tuh ...kan blog ku banyak gambar nya :) kayanya lebih menarik...hehe ...Replay

     

  6. kalo css shadow itu untuk css3 sob...kalo browsingan yg skrg blon bs ngefek sempurna...hehehehe
    kalo mau shadownya pake gambar...hehehe ...Replay

     

  7. boleh juga ni, tapi saya jarang ada gambar juga :) ...Replay

     

  8. Unknown Said,

    boleh juga nih dicobain.!!!! infonya mantabbb... ...Replay

     

  9. MS Ilman Said,

    mas, bleh bgi tutor ga cra masang header image??? ...Replay

     

  10. Unknown Said,

    keren ei.
    follow blog saya. ok
    http://www.holidaymamboo.com ...Replay

     


Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |