Ang ilang mga araw nakaraan ako ay pagpapatupad ng Image Rollover Epekto sa isang website na ako gumagawa. Karamihan sa mga website na portfolio ay gumagamit ng imahe rollover epekto. Sa ganitong tutorial ko ay malaman mo kung paano lumikha ng mga simpleng Css imahen rollover epekto. Ako ay gumagamit lamang ng isang simpleng graphic. Ang iba ay basic CSS styling, na may simpleng HTML code.

Ito bilugan ang hangganan ng ari-arian ay hindi suportado ng IE. Tingnan ang Demo

ipagbigay alam sa amin ang iyong mga saloobin? Kung kayo ay natagpuan sa anumang iba pang mga Tutorials na nais mong ibahagi sa amin, huwag mag-atubiling ipaalam sa amin sa pamamagitan ng bumababa sa isang puna.

Halimbawa:

Hakbang # 1 Css Structure

unang gumawa kami ng isang simpleng code ng Css

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } * * * (Padding: 0; margin: 0;) katawan (font: 100% normal Arial, Helvetica, walang-serif;) 
 width : 280px ; height : 150px ; background-image : url ( land .jpg ) ; background-position : top ; -moz-border-radius : 10px ; -webkit-border-radius : 10px ; border : 10px solid #ccc ; font : 13px normal Arial, Helvetica, sans-serif ; line-height : 18px ; float :left ; margin : 0 10px 10px 0 ; } . rollover_img (width: 280px; height: 150px; background-image: url (lupain. jpg); background-posisyon: top;-moz-hangganan-radius: 10px;-webkit-hangganan-radius: 10px; hangganan: 10px solid # ccc; font: 13px normal Arial, Helvetica, walang-serif; linya-taas: 18px; magpalutang: kaliwa; margin: 0 10px 10px 0;) 
  color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . rollover_img isang (color: # fff; width: 280px; height: 150px; display: block; text-labor: none;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img isang: pinapadaan (background: # 000; kalabuan:. 60; filter: alpha (kalabuan = 60);) 
  display : none ; width : 280px ; padding : 5px ; } . rollover_img isang span (display: none; width: 280px; padding: 5px;) 
  span { display : block ; } . rollover_img isang: pinapadaan span (display: block;) 

Hakbang # 2 Html Structure

ngayon gumawa kami ng isang simpleng code Html

  > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <div klase = "rollover_img"> <a pamagat = "Ace Infoway India" href = "http://blog.aceinfowayindia.com">
 <span> Lorem ipsum lumbay umupo amet, consectetur adipiscing elit.  Sed 
 condimentum.  Sa volutpat.  Vestibulum elit.  Aenean eget enim bitey 
 tellus bibendum pellentesque.  Sed sa est. Halimbawa Text, Lorem ipsum 
 sakit umupo amet, consectetur adipiscing elit. </ span>
 </ a> </ div> 

Tingnan ang Demo

Sundin sa amin sa Twitter, o mag-subscribe sa Developers Paradise + RSS Feed para sa pinakamahusay na Tutorials web-unlad sa web.

Filed under: Css, Tutorials sa pamamagitan ng admin