Kilka dni temu byłem wykonawczych efekt najeżdżania Grafika na stronie internetowej I'm working on. Większość stron internetowych portfelowych z efektem rollover image. W tym kursie i dowiedzą się, jak utworzyć prosty efekt obrazu Css wywrócenia się pojazdu. Używam tylko jednej, prostej grafiki. Reszta jest podstawowym stylach CSS, z prostego kodu HTML.

To Zaokrąglone własności granicy nie jest obsługiwana przez IE. Zobacz demo

daj nam znać twoje myśli? Jeśli znalazłeś jakieś inne tutoriale, które chcesz podzielić się z nami, prosimy o poinformowanie nas o wyniku upadku w komentarzu.

Przykład:

Krok # 1 CSS Struktura

Najpierw musimy stworzyć prosty kod CSS

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } * (Margin: 0; margin: 0;) body (font: 100% normalnej 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 (gruntów. 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;) 
  color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . rollover_img (color: # ccc; width: 280px; height: 150px; display: block; text-align: center;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img: hover (background-color: # 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: none;) 

Krok 2 HTML Struktura

Teraz stworzymy prosty kod HTML

 > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <div class = "rollover_img"> title <a href = "Ace Infoway India" = "http://blog.aceinfowayindia.com"> <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Sed condimentum.  W volutpat.  Vestibulum elit.  Aenean eget enim vitae tellus orci pellentesque.  Sed est Przykład tekstu, Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ Span> </ a> </ div> 

Zobacz demo

Follow us on Twitter, lub zapisz się do Raj + Developers RSS dla najlepszych tutoriali rozwoju w całej sieci.

Filed under: CSS, Tutoriale przez admin