Подписи к изобаражениям с визуальными эффектами на CSS3
CSS3 является очень мощным инструментом. В наши дни его можно использовать там, где раньше требовались изображения и JavaScript для получения различных эффектов. Данный урок демонстрирует шесть визуальных эффектов для вывода подписей к изображениям с применением только CSS3.
Поддержка в браузерах
Данные эффекты основаны на трансформациях и переходах. Полноценное функционирование обеспечивается в следующих браузерах:
- Internet Explorer 10+ (еще не выпущен)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Opera 11+
Разметка HTML
У нас будет 6 изображений с разными по стилю подписями:
<div id="mainwrapper"> <!-- Подпись 1 --> <div id="box-1" class="box"> <img id="image-1" src="/images/1.jpg"/> <span class="caption simple-caption"> <p>Простая подпись</p> </span> </div> <!-- Подпись 2 --> <div id="box-2" class="box"> <img id="image-2" src="/images/2.jpg"/> <span class="caption full-caption"> <h3>Подпись на всю картинку</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> <!-- Подпись 3 --> <div id="box-3" class="box"> <img id="image-3" src="/images/3.jpg"/> <span class="caption fade-caption"> <h3>Проявляющаяся подпись</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> <!-- Подпись 4 --> <div id="box-4" class="box"> <img id="image-4" src="/images/4.jpg"/> <span class="caption slide-caption"> <h3>Выскальзывающая подпись</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> <!-- Подпись 5 --> <div id="box-5" class="box"> <div class="rotate"> <img id="image-5" src="/images/5.jpg"/> <span class="caption rotate-caption"> <h3>Подпись с поворотом</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> </div> <!-- Подпись 6 --> <div id="box-6" class="box"> <img id="image-6" src="/images/6.jpg"/> <span class="caption scale-caption"> <h3>Масштабная подпись</h3> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </span> </div> </div>
Общие стили CSS
Перед определением стилей нашего проекта следует провести сброс свойств и установить для них значение по умолчанию, чтобы все браузеры выдавали одинаковый результат (может быть, за исключением IE6).
Стили располагаются в отдельном файле, поэтому их нужно подключить к нашей странице HTML.
<link href="/style.css" rel="stylesheet" type="text/css" media="screen" />
Начнем с определения стилей для тега html и основного контейнера:
html { background-color: #eaeaea; } #mainwrapper { font: 10pt normal Arial, sans-serif; height: auto; margin: 80px auto 0 auto; text-align: center; width: 660px; }
Стили для блока изображения
Определим несколько общих стилей для блоков изображений. Блоки будут выводиться один к одному со смещением влево. Обратите внимание на свойство overflow: hidden. Таким образом скрываются все элементы, вложенные в блок и выступающие за его границы.
Также определяем свойство transition - оно понадобиться нам позже.
#mainwrapper .box { border: 5px solid #fff; cursor: pointer; height: 182px; float: left; margin: 5px; position: relative; overflow: hidden; width: 200px; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; box-shadow: 1px 1px 1px 1px #ccc; } #mainwrapper .box img { position: absolute; left: 0; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; }
Общие стили подписей
Подписи также имеют общие стили и свойство transition. Вместо использования свойство opacity мы применим режим цвета RGBA со значением 0.8 для альфа канала, чтобы сделать фон подписи немного прозрачным без влияния на текст.
#mainwrapper .box .caption { background-color: rgba(0,0,0,0.8); position: absolute; color: #fff; z-index: 100; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; left: 0; }
Подпись 1
Первая подпись будет использовать простой распространенный эффект - текст будет подниматься снизу при наведении курсора мыши на изображение. Подпись имееет фиксированную высоту и мы располагаем ее в позиции -30px по вертикали, чтобы скрыть.
#mainwrapper .box .simple-caption { height: 30px; width: 200px; display: block; bottom: -30px; line-height: 25pt; text-align: center; }
Подпись 2
Второй тип подписи имеет ширину и высоту равными параметрам блока изображения (200x200px), а эффект появления заключается в выскальзывании подписи сверху вниз при наведении курсора мыши на изображение.
#mainwrapper .box .full-caption { width: 170px; height: 170px; top: -200px; text-align: left; padding: 15px; }
Подпись 3
Для третьей подписи используется эффект проявления. поэтому изначально она будет иметь свойство opacity: 0.
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption { opacity: 0; width: 170px; height: 170px; text-align: left; padding: 15px; }
Подпись 4
Четвертая подпись будет выскальзывать слева направо сдвигая изображение. Поэтому изначально она имеет положение 200px влево (left:200px).
** Caption 4: Slide **/ #mainwrapper .box .slide-caption { width: 170px; height: 170px; text-align: left; padding: 15px; left: 200px; }
Подпись 5
Пятая подпись будет использовать эффект вращения. Вращается не только текст, но и все изображение
Добавляем трансформацию вращения на -180 градусов.
#mainwrapper #box-5.box .rotate-caption { width: 170px; height: 170px; text-align: left; padding: 15px; top: 200px; -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } #mainwrapper .box .rotate { width: 200px; height: 400px; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; }
Подпись 6
Последняя подпись будет использовать трансформацию масштабирования. Но текст будет появляться с небольшой задержкой.
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p { position: relative; left: -200px; width: 170px; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; } #mainwrapper .box .scale-caption h3 { -webkit-transition-delay: 300ms; -moz-transition-delay: 300ms; -o-transition-delay: 300ms; -ms-transition-delay: 300ms; transition-delay: 300ms; } #mainwrapper .box .scale-caption p { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -o-transition-delay: 500ms; -ms-transition-delay: 500ms; transition-delay: 500ms; }
Теперь пришел черед вывода подписей при наведени курсора мыши на изображение.
Подпись 1. Поднимаем текст
Для реализации эффекта используем свойство transform для перемещения подписи на 100% ее высоту вверх.
#mainwrapper .box:hover .simple-caption { -moz-transform: translateY(-100%); -o-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); }
Подпись 2. Опускаем текст
Для второй подписи нужно организовать обратный эффект - опустить текст на 100% высоты.
#mainwrapper .box:hover .full-caption { -moz-transform: translateY(100%); -o-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); }
Подпись 3. Проявление
Третья подпись имеет самый простой код реализации эффекта. Просто изменяем значение свойства opacity на 1.
#mainwrapper .box:hover .fade-caption { opacity: 1; }
Подпись 4. Сдвигаем влево
Как уже упоминалось ранее, и подпись и изображение сдвигаются влево при наведении курсора. Поэтому здесь нужно использовать 2 определения CSS.
Код CSS будет сдвигать подпись влево при наведении курсора мыши на блок.
#mainwrapper .box:hover .slide-caption { background-color: rgba(0,0,0,1) !important; -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); opacity: 1; transform: translateX(-100%); }
Но нужно также сдвинуть и изображение:
#mainwrapper .box:hover img#image-4 { -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); }
Подпись 5. Вращаем
При наведении курсора мыши на блок, весь элемент будет поворачиваться на 180 градусов, скрывая изображение и выводя подпись.
#mainwrapper .box:hover .rotate { background-color: rgba(0,0,0,1) !important; -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); transform: rotate(-180deg); }
Подпись 6. Масштабирование
Здесь комбинируется несколько эффектов. При наведении курсора мыши на блок изображение увеличивается до 140% от начального размера.
#mainwrapper .box:hover #image-6 { -moz-transform: scale(1.4); -o-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); }
А текст подписи будет выскальзывать слева:
#mainwrapper .box:hover .scale-caption h3, #mainwrapper .box:hover .scale-caption p { -moz-transform: translateX(200px); -o-transform: translateX(200px); -webkit-transform: translateX(200px); transform: translateX(200px); }
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/irkK5MPKbzI/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Мудрость приносит следующие три плода: дар хорошо мыслить, хорошо говорить и хорошо поступать Демокрит - (около 460 до н.э.- около 360 до н.э.) - древнегреческий философ |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.