Как создать простой Css Image Rollover Влияние
Несколько дней назад я был осуществления Влияние Image Rollover на сайт я работаю. Большинство портфельных сайты использовании эффекта изображения опрокидыванием. В этом уроке я буду учиться, как создавать простые изображения Css опрокидывание эффекта. Я использую только один простой графики. Остальные основные CSS стиля, с простой код HTML.

Это округлые границу имущества не поддерживается Internet Explorer. Посмотреть демо -
дайте нам знать ваши мысли? Если вы нашли любые другие обучающие программы, которые вы хотите поделиться с нами, не стесняйтесь, сообщите нам, сбрасывая в комментарии.
Пример:
Шаг # 1 CSS структура
Сначала мы создать код, Simple CSS
; margin : 0 ; } * (PADDING: 0; Маржа: 0;) % normal Arial, Helvetica, sans-serif ; } BODY (шрифта: 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; BACKGROUND-IMAGE: URL (земля. JPG), а также справочную позиции: сверху;-МОЗ границы радиуса: 10px;-WebKit границы радиуса: 10px; границу: 10px твердом # CCC; шрифта: 13px нормальной Arial, Helvetica, Sans-Serif; линия Высота: 18px; Float: слева; Маржа: 0 10px 10px 0;)color : #fff ; width : 280px ; height : 150px ; display : block ; text-decoration : none ; } . rollover_img (COLOR: # FFF; ширина 280px, высота: 150px; Дисплей: блок; текстовые украшения: нет;){ background : # 000 ; opacity: . 60 ; filter :alpha ( opacity= 60 ) ; } . rollover_img: Hover (color: # 000; непрозрачность: 60.; фильтров: Alpha (Opacity = 60);)display : none ; width : 280px ; padding : 5px ; } . rollover_img SPAN (Дисплей: нет; ширина: 280px; обивка: 5px;)span { display : block ; } . rollover_img: Hover SPAN (DISPLAY: Блок;)
Шаг # 2 HTML структура
Теперь мы создадим простой HTML кода
> <a title = "Ace Infoway India" href = "http://blog.aceinfowayindia.com" > <div "rollover_img" класс => <a TITLE = "Ace Infoway India" HREF = "http://blog.aceinfowayindia.com"> <span> Lorem Ipsum боль сидят Яиоадоеикточ, Consectetur Adipiscing Элит. Sed Condimentum. В Volutpat. Vestibulum Элит. Aenean Eget данные Enim Tellus Бибендум Pellentesque. Sed на Est., например, текстовых, Lorem Ipsum Dolor сидеть Яиоадоеикточ, Consectetur Adipiscing Элит. </ SPAN> </ A> </ div>
Просмотреть демо
Следуйте за нами на Twitter или подписаться на разработчиков рай + RSS-канал на лучший веб-разработки руководств в Интернете.
Статьи по теме:
если вам понравилось читать эту статью, следует ознакомиться с другими соответствующими статьями ниже:






















































Codesquid говорит на: 13 февраля 2010 в 10:12 утра сказал:
Действительно хороший эффект! Хороший урок!
Последний Codesquid блог .. флаги мира, используя только XHTML и CSS
favSHARE говорит на: 13 февраля 2010 в 11:51 утра сказал:
Эта статья была распределяться на favSHARE.net. Идите и проголосует за это!
Последний блог favSHARE's .. +5 iPhone Службы каждый дизайнер веб Should Have