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

Дата публикации: 2013-09-16

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

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

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

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

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

<a
    class="caption"
    href="//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>

class="caption"

href="//cargocollective.com/jaimemartinez/Illustration"

data-title="Smug Eagle"

data-description="I watched the four riders ...">

</a>

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

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

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

.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;
}

.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);
}

.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;
}

.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; 
}

.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;
}

.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;
}

.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;
}

.caption:hover::before,

.caption:hover::after {

opacity: 1;

}

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

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

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

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

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

.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;
}

.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,

.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%);
}

.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%);
}

.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);
}

.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%);
}

.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,

.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;
}

.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%);
}

.caption:hover::before,

.caption:hover::after {

transform: translateX(0%);

}

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

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

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

Автор: Mary Lou

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

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

Метки: css3, псевдоклассы