Застосування атрибутів даних і псевдоелемент

15

Від автора: Підручник про те, як (зло)вживати атрибути даних і псевдоелементи для створення привабливих зображень-заголовків.

У сьогоднішньому уроці я хочу показати вам кілька простих прийомів CSS, використовують атрибути даних і псевдоелементи. Наше завдання в тому, щоб створити зображення-заголовок, застосувавши в якості розмітки посилання і зображення. Ми розберемося, як створити з декількох значень атрибутів даних псевдоелементи і застосувати їх при ефекті проведення мишею, або просто покажемо їх біля зображення. Застосування (більшої кількості) семантичної розмітки – як раз те, що слід робити, особливо для тих даних, які важливо продемонструвати. Але це вправа виключно для того, щоб зрозуміти, як застосовуються дані властивості і створюються красиві ефекти.

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

Будь ласка, зверніть увагу, що ми будемо використовувати деякі властивості CSS, які можуть не працювати в більш старих браузерах. Анімація псевдоелемент поки підтримується не скрізь.

Почнемо з розмітки. Як уже згадувалося, ми будемо використовувати зображення, загорнений у посилання:

Застосування атрибутів даних і псевдоелемент

Як бачите, ми визначаємо два атрибути даних, один для заголовка, другий для опису. Значення цих атрибутів будуть застосовуватися в псевдоэлементах :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.3 s;
}

У заголовка буде інший фоновий колір, ніж в опису, і ми обмежимо його висоту 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.3 s 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.3 s 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.3 s ease-in-out;
}
.caption:hover {
background: rgba(0,0,0,0);
}

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

.caption img {
display: block;
max-width: 100%;
transition: transform 0.3 s 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.3 s 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.