Kako To Stvoriti Jednostavan Css Image Rollover efekti
Prije nekoliko dana sam bio provedbi Image Rollover efekt na web Im 'rad na. Većina portfelja web stranice koriste image rollover efekt. In this tutorial ću vas naučiti kako napraviti jednostavan Css image rollover efekt. Ja sam koristeći samo jedan jednostavan grafički. Ostalo je osnovni CSS styling, s jednostavnim HTML kôd.
Ovaj Zaobljeni obrub imovine nije podržan od IE. Demo prikaz
javite nam svoje misli? Ako ste pronašli neki drugi tutoriali koji želite podijeliti s nama, slobodno nam javite ako stavite u komentar.
Primjer:
Korak # 1 CSS strukturom
Prvo smo stvoriti kod Simple Css
; margin : 0 ; } * (Padding: 0; margin: 0;) % normal Arial, Helvetica, sans-serif ; } body (font: 100% normalno 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 (kopno. jpg); background-position: top;-moz-border-radius: 10px;-webkit-border-radius: 10px; border: 10px solid # 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; height: 150px; display: block; text-decoration: none;){ background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img: hover (background: # 000; opacity:. 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
sada smo stvoriti jednostavan HTML kod
> <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div class = "rollover_img"> <a naslov = "Ace Infoway India" href = "http://blog.aceinfowayindia.com"> <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum. U volutpat. Vestibulum elit. Aenean eget enim vitae bibendum pellentesque tellus. Sed at est Primjer teksta, Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ Span> </ a> </ div>
Vidi Demo
Pratite nas na cvrkut, ili se pretplatiti na Developers Paradise + RSS Feed za najbolje web razvoj tutoriali na webu.
Promote Us
Vezani članci:
Ako ste uživali čitajući ovaj članak, molimo vas da provjerite drugih srodnih članaka u nastavku:
Codesquid kaže on: 13 veljače 2010 u 10:12 Said:
Stvarno lijepi efekt! Dobar tutorial!
Codesquid's last blog .. Flags of the World koristeći samo XHTML i CSS
favSHARE kaže on: 13 veljače 2010 u 11:51 Said:
Ovaj članak je udio na favSHARE.net. Idite i glas!
favSHARE's last blog .. 5 iPhone Apps Svaki web dizajner treba imati
165 + Trebate provjeriti Svježe Artikli za dizajneri i programeri | Tripwire magazin kaže on: 13. veljače 2010 at 243: pm Said:
[...] Kako To Stvoriti Jednostavan Css Effect Rollover slike [...]
CSS Brigit | Kako To Stvoriti Jednostavan Css Image Rollover Effect kaže on: 13. veljače 2010 at 9:56 Said:
Kako To Stvoriti Jednostavan Css Effect Rollover slike ...
Prije nekoliko dana sam bio provedbi Image Rollover efekt na web Im rad na. Većina portfelja web stranice koriste image rollover efekt. In this tutorial ću vas naučiti kako napraviti jednostavan Css image rollover efekt. Ja sam koristeći samo na ...
dot Blog. Tjedan u vezama 15/02/10 kaže on: 15. veljače 2010 at 1103: am Said:
[...] Kako napraviti jednostavan efekt CSS rollover image (aceinfowayindia. Com) [...]