Преди няколко дни бях прилагане Ефект Image Rollover в интернет страница, аз съм на работа. По-голямата част от портфейла уебсайтове се използват сила изображението преобръщане. В този урок ще ви научат как да се създаде проста Css ефект при преобръщане изображение. Аз съм се използва само една проста графика. Останалото е основен CSS стил, с прост HTML код.

Това Заоблени граничен имот не е подкрепено от IE. Вижте видео

да споделите с нас мислите си? Ако откриеш някакви други уроци, които искате да споделите с нас, не се колебайте да ни уведомите от отпадане в коментар.

Пример:

Стъпка # 1 Css Структура

Първо се създаде проста Css код

 ; margin : 0 ; } body { font : 100 % normal Arial, Helvetica, sans-serif ; } * (Подложка: 0; граница: 0;) (орган шрифта: 100% нормални 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 (ширина: 280px; височина: 150px; фон-изображение: URL (земя. JPG); фон-Позиция: нагоре;-moz-гранично-радиус: 10px;-WebKit-гранично-радиус: 10px; граница: 10px твърди # CCC; шрифта: 13px нормални Arial, Helvetica, Sans-Serif; линия-височина: 18px; сал: ляво; граница: 0 10px 10px 0;) 
  color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . rollover_img A (цвят: # FFF; ширина: 280px; височина: 150px; дисплей: блок; текст обстановка: няма;) 
  { background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img а: навъртам (фон: # 000; непрозрачност:. 60; филтър: алфа (непрозрачност = 60);) 
 display : none ; width : 280px ; padding : 5px ; } . rollover_img една педя (дисплей: няма; ширина: 280px; подложка: 5px;) 
  span { display : block ; } . rollover_img а: навъртам участък (дисплей: блок;) 

Стъпка # 2 Html Структура

Сега ние се създаде проста HTML Code

  > <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <div клас "rollover_img" => <a заглавие = "Ace Infoway India" HREF = "http://blog.aceinfowayindia.com">
 <span> Lorem Ipsum печал седне Амет, consectetur adipiscing Елит.  Sed 
 condimentum.  В volutpat.  Vestibulum Елит.  Aenean Eget автобиография enim 
 Tellus Bibendum Pellentesque.  Sed в est. Пример Текст, Lorem Ipsum 
 печал седне Амет, consectetur adipiscing Елит. </ font>
 </ A> </ span> 

Вижте видео

Следвайте ни нервна възбуда, или да се абонирате за раят за + RSS емисия за най-добрите уроци в Мрежата за развитие на мрежата.

Пила под: Css, уроци от администратор