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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

Результат.

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

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

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

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

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

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

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

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

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

Автор: Mary Lou

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки: ,

Похожие статьи:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree