Kuinka luoda yksinkertainen Css Kuva Rollover Effect
Muutama päivä sitten olin täytäntöön Kuva rollover vaikutus verkkosivuilla olen työskennellyt. Suurin osa salkun sivustot käyttävät kuva rollover vaikutus. Tässä opetusohjelmassa aion oppia, miten voit luoda yksinkertaisia Css image rollover vaikutus. Olen käyttäen vain yhtä yksinkertaista grafiikkaa. Loppu on perus CSS-tyyli, yksinkertaisia HTML-koodin.

Tämä pyöristetty rajan kiinteistö ei tue IE. View Demo
meille ajatuksiasi? Jos olet löytänyt muita opetusohjelmia, jotka haluat jakaa kanssamme, voit ottaa meihin yhteyttä pudottamalla kommentin.
Esimerkki:
Vaihe # 1 CSS rakenne
Ensin luodaan yksinkertainen CSS-koodi
; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } * (Padding: 0; margin: 0;) body (font: 100% normaali Arial, Helvetica, sans-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 (maa. jpg), tausta-asema: top;-moz-border-radius: 10px;-WebKit-border-radius: 10px; border: 10px solid # ccc; font: 13px normaali Arial, Helvetica, sans-serif; line-height: 18px; float: left; margin: 0 10px 10px 0;)color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . rollover_img (color: # FFF; width: 280px; height: 150px; display: block; text-decoration: none;){ background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img: hover (background: # 000; opasiteetti:. 60; filter: alpha (tiheys = 60);)display : none ; width : 280px ; padding : 5px ; } . rollover_img span (display: none; width: 280px; padding: 5px;)span { display : block ; } . rollover_img: hover span (display: block;)
Vaihe # 2 Html rakenne
Nyt voimme luoda yksinkertainen HTML-koodin
> <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <div class = "rollover_img"> <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com"> <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum. In volutpat. Vestibulum elit. Aenean eget enim vitae Tellus Bibendum pellentesque. Sed on arvio esimerkiksi teksti, Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ span> </ a> </ span>
View demo
Seuraa meitä hermostunut, tai tilata Developers Paradise + RSS-syöte paras web-kehitys tutorials Webissä.
Aiheeseen liittyviä artikkeleita:
Jos olet nauttinut lukea tämä artikkeli, tutustu muita aiheeseen liittyviä artikkeleita alla:






















































Codesquid sanoo: 13 helmikuu 2010 at 10:12 Said:
Really nice vaikutus! Hyvä tutorial!
Codesquid viimeinen blog .. liput maailmassa käytetään vain XHTML ja CSS
favSHARE sanoo: 13 helmikuu 2010 at 11:51 Said:
Tämä artikkeli on jaettava favSHARE.net. Mene ja äänestää sitä!
favSHARE viimeinen blog .. 5 iPhone sovellukset Jokainen Web-suunnittelija Should Have