Mar 6, 2011

efek gambar melengkung / image hover effect

Dah dua hari tak jalan- jalan kat blog orang dan dah beberapa hari jugaklah tak update belog ni,kuikuikui. Still, masih jugak ada yang sudi singgah, trimas diucapkan. So, hari ni nak update sikit. Nak kongsi satu lagi tuto menarik. Tak rugi mencuba, ye dak?

Tengok,  Baca tajuk ni pun dah tahu kan pasal apa yang nak dikongsikan tu. Contoh tajuk tu macam gambar kat bawah ni lah.


sebelum


selepas


( menggunakan gambar yang sama, malas nak buat gambar baru T.T )


Haa.. itulah yang dimaksudkan dalam tajuk tadi. Kalau korang halakan cursor kat mana- mana gambar dalam blog ( jangan  nak ngada- ngada hala sini sana cursor tu kat belog aku, aku xpakai code ni, harap mahap =,= ) , gambar tu akan menjadi melengkung. 

Kenapa aku tak pakai kat dalam belog ni sebab kalau halakan cursor kat header aku, nampak tak cantik. Kang terserlah semua kecacatan ' beliau' , ewahhhhh. Tapi untuk korang takpe, hehe. Akey, cara untuk buat ni simple je. Macam korang tidur pastu bergolek golek * tak ada kaitan* .

First, korang pergi..

dashboard - design- edit html -tick expand widget


pastu klik f3 dan cari code ni.

a img


copy code ni dan paste kat bawah atau sebelah code a img tu.

-webkit-transition-duration:.4s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px pink; -moz-box-shadow: 0px 0px 20px pink; -webkit-border-top-right-radius:20; -webkit-border-top-left-radius:20; -webkit-border-bottom-right-radius:20; -webkit-border-bottom-left-radius:20;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px dashed #FA58AC; border-radius: 30px; -moz-border-radius: 30px;}


Yang pink tu korang bolehlah tukar dengan warna yang korang suka. Yang hijau tu pulak garis- garis kat border korang. Korang boleh tukar kepada dotted, solid, double atau inset.

Selamat mencuba ^^

16 comments:

  1. good tutto..tapi khalis dah main kod lain..takut crash la pulop..

    ReplyDelete
  2. @Tengku Eyna, kan ade symbol f3 kt keyboard..klik yg tu.. xpn klik ctrl+F

    ReplyDelete
  3. ohh , yg tuh dah .. tapy sy tak jmpe code ' a img ' nieh ? knp ea ?

    ReplyDelete
  4. @Tengku Eyna,xde ke? awk gn tmplate ape ni? cb taip img je dl..

    ReplyDelete
  5. asal xjumpe 'a img' haa??? adik gune template yg biase tuu bukan classic

    ReplyDelete
  6. akk..klo kter daa tukr..blog kter mgg wrne putih yee

    ReplyDelete
  7. Hi Kak, boleh tanya sikit tak? Kenapa ehh saya tak jumpa 'a img' tu. tapi saya masukkan dalam '.post-body img'

    Jadi tu memang jadi, tapi pelik sikit lah -.-' boleh tolong tak?

    ReplyDelete
  8. akak thanks for the tuto..mnjadi lah kak..love it..haha..:))

    ReplyDelete