6 классных подписей к изображениям с помощью CSS3

CSS3 действительно мощный. Раньше было так, что нам нужны изображения или несколько строк кода JavaScript, чтобы сделать простой эффект перехода. В настоящее время мы можем сделать то же самое только с CSS3.

В этом уроке мы покажем вам, как создавать подписи к изображениям с различными переходами, просто используя CSS3.
Поддержка браузера
Этот заголовок будет сильно зависеть от свойств преобразования и перехода, которые являются относительно новыми функциями, поэтому было бы целесообразно принять к сведению поддержку браузера, необходимую для плавного выполнения заголовка.

Ниже перечислены браузеры, которые уже поддерживают преобразование и переход:

• Internet Explorer 10+ (пока не выпущен)
• Firefox 6+
• Chrome 13+
• Safari 3.2+
• Опера 11+

Теперь давайте начнем учебник.
Структура HTML
У нас есть 6 изображений; каждое изображение с другим стилем подписи.

Простая подпись

Полный заголовок

Lorem ipsum dolor sit amet, посвященный адептированию elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Исчезать заголовок

Lorem ipsum dolor sit amet, посвященный адептированию elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Заголовок слайда

Lorem ipsum dolor sit amet, посвященный адептированию elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Это поворот подписи

Lorem ipsum dolor sit amet, посвященный адептированию elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Бесплатный стиль подписи

Lorem ipsum dolor sit amet, посвященный адептированию elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Базовый CSS

Перед стилизацией любого элемента всегда полезно сбросить все свойства, используя этот сброс CSS, и присвоить им значения стиля по умолчанию, чтобы все браузеры отображали одинаковый результат (кроме, может быть, IE6).

Стили будут разделены в файле style.css, поэтому наш HTML-файл будет выглядеть аккуратно. Однако не забудьте добавить стиль ссылки внутри тега head, чтобы применить правила стиля в файле.

Хорошо, давайте начнем стилизацию элемента, начиная с тега html и основного идентификатора оболочки:

html {background-color: #eaeaea; }

#mainwrapper {
  шрифт: 10pt, обычный Arial, без засечек;
  высота: авто;
  поле: 80px auto 0 auto;
  выравнивание текста: по центру;
  ширина: 660 пикселей;
}

Стиль изображения коробки
Мы применяем некоторые общие стили в полях, содержащих изображения. Коробки будут отображаться рядом с помощью плавающего слева. Обратите внимание, что мы также добавили переполнение: скрытое свойство; это сделает все объекты внутри прохода через div скрытыми.

Мы также объявляем свойство transition для каждого изображения внутри блока, на случай, если позже понадобится переход изображения.

#mainwrapper .box {
    рамка: 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 {
    положение: абсолютное;
    слева: 0;
    -вебкит-переход: все 300 мс;
    -моз-переход: все 300 мс;
    -переход: все 300 мс;
    -ms-переход: все 300 мс;
    переход: все 300 мс;
}

Подпись Общий стиль
Заголовок будет иметь несколько общих стилей, а также свойство перехода. Вместо использования свойства непрозрачности мы используем цветовой режим RGBA с 0,8 для альфа-канала, чтобы заголовок выглядел немного прозрачным, не затрагивая текст внутри.

#mainwrapper .box .caption {
    цвет фона: rgba (0,0,0,0,8);
    положение: абсолютное;
    цвет: #fff;
    z-индекс: 100;
    -вебкит-переход: все 300 мс;
    -моз-переход: все 300 мс;
    -переход: все 300 мс;
    -ms-переход: все 300 мс;
    переход: все 300 мс;
    слева: 0;
}

Подпись 1
Первый заголовок будет иметь простой эффект перехода, который обычно используется для заголовка. Подпись появится снизу, когда мы наведем курсор на изображение. Чтобы решить эту проблему, заголовок будет иметь фиксированную высоту 30 пикселей, и мы применяем его нижнюю позицию -30 пикселей, чтобы скрыть его под изображением.

#mainwrapper .box .simple-caption {
    высота: 30 пикселей;
    ширина: 200 пикселей;
    дисплей: блок;
    низ: -30px;
    высота строки: 25pt;
    выравнивание текста: по центру;
}
Подпись 2
Второй тип имеет полную ширину и высоту размера изображения / блока (200x200px), и переход будет похож на эффект раздвижной двери, только если он будет скользить сверху вниз.

#mainwrapper .box .full-caption {
    ширина: 170 пикселей;
    высота: 170px;
    верх: -200px;
    выравнивание текста: слева;
    отступы: 15 пикселей;
}
Подпись 3
Третий заголовок будет иметь эффект затухания. Итак, мы добавили непрозрачность: 0 для его начального состояния.

#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
    непрозрачность: 0;
    ширина: 170 пикселей;
    высота: 170 пикселей;
    выравнивание текста: слева;
    отступы: 15 пикселей;
}
Подпись 4
Четвертый заголовок будет скользить слева направо, поэтому мы зафиксировали 200 пикселей слева (слева: 200 пикселей) в качестве начальной позиции.

** Подпись 4: Слайд ** /
#mainwrapper .box .slide-caption {
    ширина: 170 пикселей;
    высота: 170 пикселей;
    выравнивание текста: слева;
    отступы: 15 пикселей;
    слева: 200 пикселей;
}
Подпись 5
Пятая подпись будет иметь эффект вращения. Поворачивается не только заголовок, но и изображение. Это больше похоже на изменение положения при вращении.

Итак, мы добавляем свойство transform с поворотом на -180 градусов, если вы не предпочитаете поворачивать монитор, чтобы прочитать подпись.

#mainwrapper # box-5.box .rotate-caption {
    ширина: 170 пикселей;
    высота: 170 пикселей;
    выравнивание текста: слева;
    отступы: 15 пикселей;
    верх: 200 пикселей;
    -moz-transform: повернуть (-180 градусов);
    -опреобразование: поворот (-180 градусов);
    -webkit-transform: повернуть (-180 градусов);
    преобразование: вращение (-180 градусов);
}

#mainwrapper .box .rotate {
    ширина: 200 пикселей;
    высота: 400 пикселей;
    -вебкит-переход: все 300 мс;
    -моз-переход: все 300 мс;
    -переход: все 300 мс;
    -ms-переход: все 300 мс;
    переход: все 300 мс;
}
Подпись 6
Последняя подпись будет иметь масштабное преобразование. Однако в предыдущих заголовках текст внутри него будет отображаться вместе со сдвигом перехода .caption. В этом разделе мы сделаем это немного по-другому.

Текст появится после завершения перехода. Итак, мы добавляем переход-задержку на текст, в данном случае это теги h4 и p.

#mainwrapper .box .scale-caption h4, #mainwrapper .box .scale-caption p {
    положение: относительное;
    слева: -200px;
    ширина: 170 пикселей;
    -вебкит-переход: все 300 мс;
    -моз-переход: все 300 мс;
    -переход: все 300 мс;
    -ms-переход: все 300 мс;
    переход: все 300 мс;
}

#mainwrapper .box .scale-caption h4 {
    -webkit-transition-delay: 300 мс;
    -моз-переход-задержка: 300 мс;
    задержка перехода: 300 мс;
    -ms-transition-delay: 300мс;
    задержка перехода: 300 мс;
}

#mainwrapper .box .scale-caption p {
    -webkit-transition-delay: 500мс;
    -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 {
  цвет фона: 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 {
    цвет фона: rgba (0,0,0,1)! важный;
    -moz-transform: повернуть (-180 градусов);
    -опреобразование: поворот (-180 градусов);
    -webkit-transform: повернуть (-180 градусов);
    преобразование: вращение (-180 градусов);
}

Поведение заголовка 6: увеличьте масштаб.
Этот заголовок объединит несколько эффектов преобразования. Когда окно находится при наведении, изображение увеличится на 140% (1,4) от исходного размера.

#mainwrapper .box: hover # image-6 {

    -моз-преобразование: масштаб (1.4);
    -опреобразование: масштаб (1.4);
    -webkit-transform: шкала (1.4);
    преобразование: масштаб (1.4);
}
И если вы видели CSS выше под заголовком заголовка 6, мы скрыли текст слева на 200 пикселей. Этот код CSS ниже говорит тексту, чтобы переместиться в его начальную позицию. Таким образом, текст будет скользить слева направо одновременно.

#mainwrapper .box: hover .scale-caption h4,
#mainwrapper .box: hover .scale-caption p {
    -moz-transform: translateX (200px);
    -o-transform: translateX (200px);
    -webkit-transform: translateX (200px);
    transform: translateX (200px);
}
Резюме
Хотя эти функции CSS замечательные, но они пока не получили широкого применения из-за ограничений поддержки браузера, о которых мы упоминали ранее. Однако продолжайте экспериментировать с этими новыми функциями, потому что именно так мы будем формировать веб-страницу в будущем.
кредиты
Эскизы изображений в руководстве взяты со следующих сайтов (скриншот):