Kako ustvariti enostavni Css Image Rollover Effect
Pred nekaj dnevi sem bil za izvajanje Image Rollover Effect na spletni strani delam naprej. Večina portfelja spletnih strani uporabljajo sliko prevračanjem učinek. V tem Tutorial sem vas bodo naučili, kako ustvariti preprosto Css image prevračanjem učinek. Rabim samo eno enostavno grafiko. Ostalo je osnovni CSS styling, s preprosto kodo HTML.

Ta lastnost Rounded meje ne podpira IE. View Demo
Sporočite nam svoje misli? Če si našel druge Vadnice, ki jih želite deliti z nami, vas prosimo, da nas obvestite, ki ga spustite komentar.
Primer:
Korak # 1 Css Struktura
Najprej smo ustvarili kodo, Simple Css
; margin : 0 ; } * (Padding: 0; margin: 0;) % normal Arial, Helvetica, sans-serif ; } body (font: 100% normalne 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, višina: 150px; background-image: url (land. jpg); background-position: top;-moz-border-radius: 10px;-webkit-border-radius: 10px; border: 10px trdna # CCC; font: 13px normalno 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, višina: 150px; display: block; text-decoration: none;){ background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img: hover (background: # 000; motnosti:. 60; filter: alpha (opacity = 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;)
Korak # 2 Html Struktura
Zdaj smo ustvarili kodo, Simple Html
> <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <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 bibendum vitae tellus pellentesque. Sed est na primer Besedilo, Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ Span> </ a> </ div>
View Demo
Sledite nam na Twitter, ali se naročite na Developers Paradise + RSS Feed za najboljši tutorski web development na spletu.
Povezani članki:
Če ste uživali branju tega članka, preverite iz drugih sorodnih člankov spodaj:






















































Codesquid pravi on: 13. februar 2010 ob 10:12 Said:
Res lepo učinek! Dober tutorial!
Codesquid zadnji blog .. Zastave svetu uporabljajo samo XHTML in CSS
favSHARE pravi on: 13. februar 2010 ob 11:51 Said:
Ta članek je bil skupno na favSHARE.net. Pojdi in glasovanje je!
favSHARE zadnji blog .. 5 iPhone Apps Vsak Web Designer Če Have