Применение пользовательских атрибутов данных и псевдоэлементов

Применение пользовательских атрибутов данных и псевдоэлементов

От автора: Учебник о том, как (зло)употреблять пользовательские атрибуты данных и псевдоэлементы для создания привлекательных изображений-заголовков.

В сегодняшнем учебнике я хочу показать вам несколько простых приемов CSS, использующих атрибуты данных и псевдоэлементы. Наша задача в том, чтобы создать изображение-заголовок, применив в качестве разметки только ссылку и изображение. Мы разберемся, как создать из нескольких значений атрибутов данных псевдоэлементы и применить их при эффекте проведения мышью, или просто покажем их возле изображения. Применение (большего количества) семантической разметки – как раз то, что следует делать, особенно для тех данных, которые важно продемонстрировать. Но это упражнение исключительно для того, чтобы понять, как применяются данные свойства и создаются красивые эффекты.

Если хотите видеть интересные эффекты проведения мышью изображения-заголовка с «настоящей» разметкой, взгляните на Caption Hover Effects. Если интересуетесь действительно классной анимацией и переходами с псевдоэлементами, то просмотрите эту статью Марко Барриа (Marco Barria): Примеры анимации и переходов псевдоэлементов (Examples of Pseudo-Elements Animations and Transitions).

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

Начнем с разметки. Как уже упоминалось, мы будем использовать изображение, обернутое в ссылку:

<a
    class="caption"
    href="http://cargocollective.com/jaimemartinez/Illustration"
    data-title="Smug Eagle"
    data-description="I watched the four riders ...">
 
    <img src="images/1.jpg" alt="Illustration of Smug Eagle">
     
</a>

Как видите, мы определяем два атрибута данных, один для заголовка, второй для описания. Значения этих атрибутов будут применяться в псевдоэлементах :before и :after.

Первое изображение-заголовок будет статичным: нам нужно поместить содержимое атрибутов данных прямо рядом с изображением. Для этого сначала назначим стили ссылке и изображению:

.caption {
    display: inline-block;
    position: relative;
    margin: 10px;
}
 
.caption img {
    display: block;
    max-width: 100%;
}

Ссылка будет отображаться как элемент inline-block, давая возможность контенту обтекать его. Добавляем поле и устанавливаем позиционирование на relative. Это важно, потому что мы абсолютно разместим псевдоэлементы, и это даст нам возможность сделать это относительно ссылки. Назначив изображению максимальную ширину в 100%, мы подготовим его к адаптивной среде.

Пример 1: заголовок рядом с изображением

Теперь давайте сделаем первое волшебное изображение-заголовок из значений data-title и data-description. Нам нужно, чтобы оба псевдоэлемента были абсолютно позиционированы справа рядом с изображением. Давайте назначим им несколько простых стилей:

.caption::before,
.caption::after {
    position: absolute;
    left: 100%;
    width: 90%;
    margin: 0 0 0 10%;
    font-weight: 300;
    color: #89867e;
}

Определив left в 100%, мы ставим псевдоэлементы прямо рядом с изображением. 90% соответствует ширине ссылки, которая, в свою очередь, определяется содержимым – изображением.

Давайте назначим каждому из псевдоэлементов его контент. Получим значение соответствующего атрибута данных и добавим его к контенту псевдоэлемента с помощью attr():

.caption::before {
    content: attr(data-title);
    top: 0;
    height: 25%;
    padding: 5px 30px 15px 10px;
    font-size: 40px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

Кроме назначения некоторых размерных стилей, то же самое проделаем с псевдоэлементом :after:

.caption::after {
    content: attr(data-description);
    top: 25%;
    padding: 20px 10px 0;
    font-size: 18px;
}

Смотрите результат того, что мы сейчас сделали.

Пример 2: показ при проведении мышью (непрозрачность)

Теперь давайте сделаем заголовок, показываемый при проведении мышью, просто анимировав непрозрачность псевдоэлементов. Для этого снова установим их в абсолютное положение. Но на этот раз они покроют изображение. Определение непрозрачности в 0 и назначение перехода для непрозрачности дадут нам возможность анимировать их при проведении мышью:

.caption::before,
.caption::after {
    opacity: 0;
    position: absolute;
    width: 100%;
    color: #fff;
    padding: 20px;
    transition: opacity 0.3s; 
}

У заголовка будет другой фоновый цвет, чем у описания, и мы ограничим его высоту 30% от общей высоты:

.caption::before {
    content: attr(data-title);
    top: 0;
    height: 30%;
    background: #a21f00;
    font-size: 40px;
    font-weight: 300;
}

Для описания мы не просто добавим значение data-description, а вставим и прикрепим открывающие и закрывающие кавычки. Для этого добавим значения CSS кавычкам, которые мы преобразовали с помощью инструмента вроде Entity Conversion Calculator от Evolution Technologies. Фон ближе к заголовку будет слегка светлее, и мы выровняем текст по правой стороне:

.caption::after {
    content: '\201C' attr(data-description) '\201D';
    top: 30%;
    height: 70%;
    background: #db2e00;
    font-size: 16px;
    text-align: right;
}

Так как высота заголовка составляет 30%, описанию мы назначим оставшуюся высоту в 70%. И наконец, установим непрозрачность при проведении мышью на 1:

.caption:hover::before,
.caption:hover::after {
    opacity: 1;
}

Результат этого стиля следующий (проведите над изображением).

Пример 3: выскальзывание при проведении мышью (преобразование)

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

Overflow для ссылки должно быть установлено на hidden, потому что заголовок и описание должны быть установлены вне ее и, конечно, нам их видеть не следует. Вдобавок, для ссылки мы сделаем черный фон, чтобы можно было затемнить изображение при снижении его непрозрачности:

.caption {
    display: inline-block;
    position: relative;
    margin: 10px;
    overflow: hidden;
    background: #000;
}

Добавим изображению переход и установим непрозрачность на 0,5 при проведении мышью. Так изображение будет казаться темнее – как раз то, что нам нужно:

.caption img {
    display: block;
    max-width: 100%;
    transition: opacity 0.3s ease-in-out; 
}
 
.caption:hover img {
    opacity: 0.5;
}

Обычный стиль псевдоэлементов ::before и ::after такой же, как в предыдущих примерах, но теперь мы назначаем им одинаковую высоту и устанавливаем z-index на 1 для того, чтобы на самом деле они оставались поверх изображения. Добавляемый переход будет нужен для преобразования. Вы увидите в отдельных стилях, что мы расположим псевдоэлементы вне прямоугольника ссылки, транслировав их на ось Y.

.caption::after,
.caption::before {
    position: absolute;
    width: 100%;
    height: 50%;
    color: #fff;
    z-index: 1;
    transition: transform 0.3s ease-in-out; 
}

Давайте установим фоновые цвета псевдоэлементов и преобразования для перемещения заголовка вверх, а описания вниз:

.caption::after {
    content: attr(data-title);
    top: 0;
    background: #0083ab;
    font-size: 40px;
    font-weight: 300;
    padding: 30px;
    transform: translateY(-100%);
}
 
.caption::before {
    content: '...' attr(data-description) '...';
    top: 50%;
    background: #f27545;
    font-size: 14px;
    padding: 20px;
    transform: translateY(100%);
}

А при проведении мышью мы просто устанавливаем преобразование на translateY(0%) с тем, чтобы они переместились в ту позицию, которую мы определили с помощью top’ов:

.caption:hover::after,
.caption:hover::before {
    transform: translateY(0%);
}

Результат.

Пример 4: сдвижение в сторону при проведении мышью (преобразование)

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

.caption {
    display: inline-block;
    position: relative;
    margin: 10px;
    overflow: hidden;
    background: rgba(0,0,0,0.2);
    transition: background 0.3s ease-in-out;
}
 
.caption:hover {
    background: rgba(0,0,0,0);
}

При проведении мышью изображение сдвинется вправо. Для этого мы воспользуемся translateX:

.caption img {
    display: block;
    max-width: 100%;
    transition: transform 0.3s ease-in-out;
}
 
.caption:hover img {
    transform: translateX(100%);
}

Псевдоэлементам нужно быть ниже ссылки, поэтому определим z-index в -1. Исходное преобразовние установит их с левой стороны:

.caption::before,
.caption::after {
    position: absolute;
    width: 100%;
    z-index: -1;
    background: #cecece;
    transform: translateX(-30%);
    transition: transform 0.3s ease-in-out;
}

Как и перед этим, добавим в псевдоэлементы соответствующий контент и назначим им высоту и несколько стилей тексту:

.caption::before {
    content: attr(data-title);
    height: 30%;
    color: #05b19a;
    font-size: 40px;
    font-weight: 300;
    padding: 30px;
}
 
.caption::after {
    content: '\201C' attr(data-description) '\201D';
    top: 30%;
    height: 70%;
    color: #fff;
    font-size: 14px;
    padding: 20px 30px;
}

При проведении мышью просто установим translateX на 0:

.caption:hover::before,
.caption:hover::after  {
    transform: translateX(0%);
}

Смотрите результат последнего примера.

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

Все примеры можно увидеть в этом демо или скачать файл ZIP.

Автор: Mary Lou

Источник: http://tympanus.net/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree