6 классных подписей к изображениям с помощью CSS3
CSS3 действительно мощный. Раньше было так, что для простого эффекта перехода нам нужны изображения или несколько строк кода JavaScript. В настоящее время мы можем сделать то же самое только с CSS3.
В этом уроке мы покажем вам, как создавать подписи к изображениям с различными переходами, просто используя CSS3.
- демонстрация
- Скачать исходник
Поддержка браузера
Этот заголовок будет сильно зависеть от свойств преобразования и перехода, которые являются относительно новыми функциями, поэтому было бы целесообразно принять к сведению поддержку браузера, необходимую для плавного выполнения заголовка..
Ниже перечислены браузеры, которые уже поддерживают преобразование и переход:
- Internet Explorer 10+ (пока не выпущен)
- Firefox 6+
- Chrome 13+
- Safari 3.2+
- Опера 11+
Теперь давайте начнем учебник.
Структура HTML
У нас есть 6 изображений; каждое изображение с другим стилем подписи.
Простая подпись
Полный заголовок
Lorem Ipsum Dolor Sit Amet, Aceistectier Adipiscing Elit, Sed Diam Nonummy Nibh Euismod Tincidunt Ут Лареет Долоре Магна Аликвам Эрат Волутпат.
Исчезать заголовок
Lorem Ipsum Dolor Sit Amet, Aceistectier Adipiscing Elit, Sed Diam Nonummy Nibh Euismod Tincidunt Ут Лареет Долоре Магна Аликвам Эрат Волутпат.
Заголовок слайда
Lorem Ipsum Dolor Sit Amet, Aceistectier Adipiscing Elit, Sed Diam Nonummy Nibh Euismod Tincidunt Ут Лареет Долоре Магна Аликвам Эрат Волутпат.
Это поворот подписи
Lorem Ipsum Dolor Sit Amet, Aceistectier Adipiscing Elit, Sed Diam Nonummy Nibh Euismod Tincidunt Ут Лареет Долоре Магна Аликвам Эрат Волутпат.
Заголовок свободного стиля
Lorem Ipsum Dolor Sit Amet, Aceistectier Adipiscing Elit, Sed Diam Nonummy Nibh Euismod Tincidunt Ут Лареет Долоре Магна Аликвам Эрат Волутпат.
Базовый CSS
Перед стилизацией любого элемента всегда полезно сбросить все свойства, используя этот сброс CSS, и присвоить им значения стиля по умолчанию, чтобы все браузеры отображали одинаковый результат (кроме, может быть, IE6)..
Стили будут разделены в файле style.css, поэтому наш HTML-файл будет выглядеть аккуратно. Однако не забудьте добавить стиль ссылки внутри тега head, чтобы применить правила стиля в файле..
Хорошо, давайте начнем стилизацию элемента, начиная с тега html и основного идентификатора оболочки:
html background-color: #eaeaea; #mainwrapper font: 10pt normal Arial, без засечек; высота: авто; поле: 80px auto 0 auto; выравнивание текста: по центру; ширина: 660 пикселей;
Стиль изображения коробки
Мы применяем некоторые общие стили в полях, содержащих изображения. Коробки будут отображаться рядом с помощью плавающего слева. Обратите внимание, что мы также добавили переполнение: скрытое свойство; это сделает все объекты внутри прохода через div скрытыми.
Мы также объявляем свойство transition для каждого изображения внутри блока, на случай, если нам понадобится переход изображения позже.
#mainwrapper .box border: 5px solid #fff; курсор: указатель; высота: 182 пикселей; плыть налево; поле: 5px; положение: относительное; переполнение: скрытое; ширина: 200 пикселей; -webkit-box-shadow: 1px 1px 1px 1px #ccc; -moz-box-shadow: 1px 1px 1px 1px #ccc; тень от рамки: 1px 1px 1px 1px #ccc; #mainwrapper .box img position: absolute; слева: 0; -webkit-transition: все 300 мс; -моз-переход: все 300 мс; -переход: все 300 мс; -ms-переход: все 300 мс; переход: все 300 мс;
Подпись Общий стиль
Заголовок будет иметь несколько общих стилей, а также свойство перехода. Вместо использования свойства непрозрачности мы используем цветовой режим RGBA с 0,8 для альфа-канала, чтобы заголовок выглядел немного прозрачным, не затрагивая текст внутри.
#mainwrapper .box .caption background-color: rgba (0,0,0,0.8); положение: абсолютное; цвет: #fff; z-индекс: 100; -webkit-transition: все 300 мс; -моз-переход: все 300 мс; -переход: все 300 мс; -ms-переход: все 300 мс; переход: все 300 мс; слева: 0;
Подпись 1
Первая подпись будет иметь простой эффект перехода, который обычно используется для подписи. Подпись появится снизу, когда мы наведем курсор на изображение. Чтобы решить эту проблему, заголовок будет иметь фиксированную высоту 30 пикселей, и мы применяем его нижнюю позицию -30 пикселей, чтобы скрыть его под изображением..
#mainwrapper .box .simple-caption height: 30px; ширина: 200 пикселей; дисплей: блок; низ: -30px; высота строки: 25pt; выравнивание текста: по центру;
Подпись 2
Второй тип имеет полную ширину и высоту размера изображения / блока (200x200px), и переход будет похож на эффект раздвижной двери, только если он будет скользить сверху вниз.
#mainwrapper .box .full-caption width: 170px; высота: 170 пикселей; верх: -200px; выравнивание текста: слева; отступы: 15 пикселей;
Подпись 3
Третий заголовок будет иметь эффект затухания. Итак, мы добавили непрозрачность: 0 для его начального состояния.
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption opacity: 0; ширина: 170 пикселей; высота: 170 пикселей; выравнивание текста: слева; отступы: 15 пикселей;
Подпись 4
Четвертый заголовок будет скользить слева направо, поэтому мы зафиксировали 200 пикселей слева (слева: 200 пикселей) в качестве начальной позиции.
** Подпись 4: Slide ** / #mainwrapper .box .slide-caption width: 170px; высота: 170 пикселей; выравнивание текста: слева; отступы: 15 пикселей; слева: 200 пикселей;
Подпись 5
Пятая подпись будет иметь эффект вращения. Поворачивается не только заголовок, но и изображение. Это больше похоже на изменение положения при вращении.
Итак, мы добавляем свойство transform с поворотом на -180 градусов, если вы не предпочитаете поворачивать монитор, чтобы прочитать заголовок.
#mainwrapper # box-5.box .rotate-caption width: 170px; высота: 170 пикселей; выравнивание текста: слева; отступы: 15 пикселей; верх: 200 пикселей; -moz-transform: повернуть (-180 градусов); -опреобразование: поворот (-180 градусов); -webkit-transform: повернуть (-180 градусов); преобразование: вращение (-180 градусов); #mainwrapper .box .rotate width: 200px; высота: 400 пикселей; -webkit-transition: все 300 мс; -моз-переход: все 300 мс; -переход: все 300 мс; -ms-переход: все 300 мс; переход: все 300 мс;
Подпись 6
Последняя подпись будет иметь масштабное преобразование. Однако в предыдущих заголовках текст внутри него будет отображаться вместе со сдвигом перехода .caption. В этом разделе мы сделаем это немного иначе.
Текст появится после завершения перехода. Итак, мы добавляем переход-задержку на текст, в этом случае теги h3 и p.
#mainwrapper .box .scale-caption h3, #mainwrapper .box .scale-caption p position: относительный; слева: -200px; ширина: 170 пикселей; -webkit-transition: все 300 мс; -моз-переход: все 300 мс; -переход: все 300 мс; -ms-переход: все 300 мс; переход: все 300 мс; #mainwrapper .box .scale-caption h3 -webkit-transition-delay: 300ms; -моз-переход-задержка: 300 мс; задержка o-перехода: 300 мс; -ms-transition-delay: 300мс; задержка перехода: 300 мс; #mainwrapper .box .scale-caption p -webkit-transition-delay: 500ms; -moz-transition-delay: 500мс; задержка перехода: 500 мс; -ms-transition-delay: 500мс; задержка перехода: 500 мс;
Давайте заставим их двигаться
В следующем разделе мы определим поведение заголовка при наведении курсора на изображения или поля..
Поведение подписи 1: показать вверх.
Для первого заголовка мы бы хотели, чтобы он отображался (снизу), когда мы наводим курсор на поле. Чтобы решить эту проблему, мы используем свойство transform, а приведенный ниже код CSS говорит заголовку переместить 100% его веса в начало.
#mainwrapper .box: hover .simple-caption -moz-transform: translateY (-100%); -опреобразование: translateY (-100%); -webkit-transform: translateY (-100%); transform: translateY (-100%);
Если у вас нет смысла иметь отрицательное значение для translateY, вы можете сначала прочитать этот учебник, чтобы получить больше информации.
Поведение заголовка 2: опустить его.
И наоборот, вторая подпись переместится сверху вниз. Таким образом, мы будем иметь положительное значение для translateY.
#mainwrapper .box: hover .full-caption -moz-transform: translateY (100%); -опреобразование: translateY (100%); -webkit-transform: translateY (100%); transform: translateY (100%);
Поведение титров 3: исчезновение.
Третий заголовок на самом деле самый простой. Когда флажок находится при наведении курсора, непрозрачность заголовка станет равной 1, что сделает его видимым, и, поскольку мы добавили свойство перехода в класс заголовка, переход должен выполняться плавно.
#mainwrapper .box: hover .fade-caption непрозрачность: 1;
Поведение заголовка 4: сдвиньте его влево.
Как мы упоминали ранее, этот заголовок будет перемещаться слева, однако изображение также будет скользить вправо. Итак, у нас есть 2 объявления CSS.
Приведенный ниже код CSS указывает, что при наведении курсора на прямоугольник заголовок будет сдвигаться на 100% по ширине влево. Обратите внимание, что теперь мы используем translateX, потому что мы хотим, чтобы слайд двигался горизонтально справа налево.
#mainwrapper .box: hover .slide-caption background-color: rgba (0,0,0,1)! важный; -moz-transform: translateX (-100%); -отрансформация: translateX (-100%); -webkit-transform: translateX (-100%); непрозрачность: 1; transform: translateX (-100%);
Когда мы наведем курсор на прямоугольник, изображение выскользнет влево.
#mainwrapper .box: hover img # image-4 -moz-transform: translateX (-100%); -отрансформация: translateX (-100%); -webkit-transform: translateX (-100%); transform: translateX (-100%);
Поведение заголовка 5: поверните его.
Этот заголовок отличается от остальных, так как он не будет двигаться ни вправо, ни влево, а будет вращаться. Когда поле находится при наведении, элемент div, содержащий изображение и заголовок, будет вращаться на -180 против часовой стрелки, скрывая изображение и показывая заголовок.
/ ** Поворот Подпись: поведение при наведении ** / #mainwrapper .box: hover .rotate background-color: rgba (0,0,0,1)! Важный; -moz-transform: повернуть (-180 градусов); -опреобразование: поворот (-180 градусов); -webkit-transform: повернуть (-180 градусов); преобразование: вращение (-180 градусов);
Поведение заголовка 6: увеличьте масштаб.
Этот заголовок объединит несколько эффектов преобразования. Когда окно находится при наведении, изображение увеличится на 140% (1,4) от исходного размера.
#mainwrapper .box: hover # image-6 -moz-transform: scale (1.4); -опреобразование: масштаб (1.4); -webkit-transform: масштаб (1.4); преобразование: масштаб (1.4);
И если вы видели CSS выше под Подпись 6 заголовок, мы скрыли текст слева на 200 пикселей. Этот код CSS ниже говорит тексту, чтобы переместиться в его начальную позицию. Таким образом, текст будет скользить слева направо одновременно.
#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);
- демонстрация
- Скачать исходник
Резюме
Хотя эти функции CSS замечательные, но они пока еще не получили широкого применения из-за ограничений поддержки браузера, о которых мы упоминали ранее. Однако продолжайте экспериментировать с этими новыми функциями, потому что именно так мы будем формировать веб-страницу в будущем..
кредиты
Миниатюры изображений в руководстве взяты со следующих сайтов (скриншот):
- Книга отдельно
- Archiduchesse
- видеоблог
- Hongkiat
- Приветствующая Ферма
- Марк Эко
