Информер с визуальным слайд-эффектом
 | |
| Создаём простые информер с эффектом в виде выезжающего блока с названием и описанием материала для каталогов сайта на HTML5 и CSS3. Раньше для создания различных эффектов требовалось подключение javascript и дополнительных файлов изображений, с приходом инструментов CSS3 и HTML5 всё реализуется гораздо проще. Здесь чем отличается этот эффект, что он может применяться на вид материалов, и с ним идут стили, чтоб сделать под свой дизайн, и на ресурсе будут оригинально все смотреться Эффект основан на трансформациях и переходах CSS3 применённых к тегу HTM5 Работает стопроцентно в следующих браузерах: Internet Explorer 10+, Firefox 6+, Chrome 13+, Opera 11+ и Safari 3.2+. Кстати если вам не всё равно на армию пользователей упорно засевших на XP с её IE8, широко и повсеместно использовать эффекты основанные только на CSS3, пока преждевременно. HTML разметка Код <figure> <img src="$IMG_URL1$" alt="$TITLE$"> <figcaption> <h2>$TITLE$</h2> <p>$MESSAGE$</p> <a href="$ENTRY_URL$">Подробнее</a> </figcaption> </figure> Чтобы укоротить описание поменяем Код <p>$MESSAGE$</p> на: Код <p><?substr($MESSAGE$,0,250)?> ...</p> Стили CSS Код figure { width: 285px; height: 185px; margin: 5px; overflow: hidden; position: relative; text-align: left; -moz-box-shadow:0 5px 5px #000; box-shadow:0 5px 5px #000; -webkit-box-shadow:0 5px 5px #000; border-radius: 5px; cursor: default; font:normal 12px/14px Helvetica, Arial, sans-serif; } figure figcaption, figure figcaption img{ width: 285px; height: 185px; position: absolute; overflow: hidden; top: 0; left: 0; background: #EEEEEE; -moz-transform: translateX(-285px); -o-transform: translateX(-285px); -webkit-transform: translateX(-285px); transform: translateX(-285px); visibility:hidden; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } figure img { width: 285px; height: 185px; display: block; position: relative; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } figure h2 { text-transform: uppercase; color: #B22222; position: relative; font-size: 14px; letter-spacing: 1px; margin: 10px 0 0 10px; } figure p { font-size: 12px; line-height: 16px; position: relative; color: #333; margin: 10px 10px; -webkit-transition: all 0.5 ease-out; -moz-transition: all 0.5 ease-out; -ms-transition: all 0.5 ease-out; -o-transition: all 0.5 ease-out; transition: all 0.5 ease-out; } figure a { text-decoration: none; color: #359CC6; margin: 10px 10px; } figure a:hover { color: #B22222; border-bottom: 1px dotted #9F1D35; } figure:hover figcaption, figure:hover figcaption img{ -moz-transform: translateX(0); -o-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); visibility:visible; } figure:hover img { -moz-transform: translateX(285px); -o-transform: translateX(285px); -webkit-transform: translateX(285px); transform: translateX(285px); } figure:hover p{ opacity: 1; } Размеры и цвета конечно же меняем на свои, а если интересно посмотреть в работе информер, то извиняюсь что не стал делать Демо, недавно сделал знакомой девушке такой же информер ТУТ на главной странице сайта, поэтому не стал делать двойную работу. Также вы можете посмотреть демонстрацию, на этот материал.  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 14 | |
|
| |
