Необычные случаи использования псевдо-элементов

Необычные случаи использования псевдо-элементов

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

Эффект «наведение родитель-потомок»

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

Необычные случаи использования псевдо-элементов

В макете есть заголовок раздела с небольшим кружком слева от него. Когда мы наведем курсор на заголовок раздела, круг станет больше.

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

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

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

Легко и просто. Давайте расширим эту концепцию более полезными вариантами использования.

Раздел проекта / блога

На моем сайте есть раздел, в котором перечислены все мои проекты. Я хотел добавить эскиз для каждого проекта, но для меня это не было приоритетом. Для меня важнее сама ссылка. Впервые я увидел этот эффект некоторое время назад на сайте Итана Маркотта.

Необычные случаи использования псевдо-элементов

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

Необычные случаи использования псевдо-элементов

1) Я добавил отступы к разделу Hero

Необычные случаи использования псевдо-элементов

Я хочу зарезервировать место для псевдо-элементов, для этого предназначены отступы.

2) Позиционируем псевдо-элементы абсолютно

Чтобы позиционировать их абсолютно, мне нужно определить, с каким родителем они связаны. Обратите внимание на GIF ниже, как удаление position: relative для раздела .hero влияет на псевдо-элементы.

Необычные случаи использования псевдо-элементов

3) Добавление псевдо-элементов

Последний шаг — добавить псевдо-элементы вместе с эффектами наведения. Вот как я это сделал:

Необычные случаи использования псевдо-элементов

Обратите внимание, что я использовал currentColor для фона псевдо-элемента. Если вам не знакомо это ключевое слово, оно задает наследование от значения color его родителя. Поэтому в любой момент, когда я захочу изменить цвета ссылок, их легко изменить только один раз.

Необычные случаи использования псевдо-элементов

Если вам интересно, перейдите на главную страницу моего сайта и откройте раздел «Мои проекты». Я использовал там данную технику.

Необычные случаи использования псевдо-элементов

Увеличение размера кликабельной области

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

Необычные случаи использования псевдо-элементов

Кроме того, он может быть использован для расширения области клика компонента карточки, который имеет ссылку «Смотреть больше».

Необычные случаи использования псевдо-элементов

Наложения

Давайте предположим, что у нас есть элемент с фоновым изображением, а дизайн содержит наложение градиента с режимом наложения color. В этом могут помочь псевдо-элементы!

Необычные случаи использования псевдо-элементов

Закругленные тени

Я не уверен, что правильное название, но это то, что у меня получилось. В те времена я использовал тени, которые закруглены по краям. Угадай, что! Можно создавать их с помощью псевдо-элемента.

Необычные случаи использования псевдо-элементов

Создание элемента

Я создал элемент div с обычными стилями, как показано ниже.

Необычные случаи использования псевдо-элементов

Добавление псевдо-элементов

Затем я добавил псевдо-элементы :before и :after с шириной 50% для каждого из них (для целей демонстрации я добавил им разные фоны).

Необычные случаи использования псевдо-элементов

Далее я добавлю, transform: skew(x), где Х будет 2 градуса. Для одного из них Х должен быть отрицательным.

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

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

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

Необычные случаи использования псевдо-элементов

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

Необычные случаи использования псевдо-элементов

После этого я сделал следующее:

добавил filter: blur

Уменьшил непрозрачность

Добавил градиент от прозрачного к черному (чтобы скрыть края псевдо-элементов в верхнем центре родителя)

Окончательный код:

Существует еще один вариант — поменять местами значения skewY для :before и :after. Это даст другой эффект.

Необычные случаи использования псевдо-элементов

Использование :After или :Before

Из недавнего обсуждения в Твиттере я узнал, что лучше использовать :before вместо :after. Почему? Потому что при использовании :after может потребоваться добавить z-index к другим вложенным элементам, чтобы псевдо-элемент не перекрывал их. Давайте возьмем реальный пример.

Вот простая карточка, которая состоит из миниатюры и заголовка. Если вы заметили, под текстом есть наложение градиента, чтобы сделать текст более четким в случае, если изображение слишком светлое.

Необычные случаи использования псевдо-элементов

Чтобы добавить наложение градиента под текстом, мне нужно будет использовать псевдо-элемент. Какой из них вы выберете? :before или :after? Давайте рассмотрим оба.

1) :after

В этом случае заголовок появится под наложением псевдо-элемента, как показано ниже.

Необычные случаи использования псевдо-элементов

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

2) :before

При использовании элемента :before для наложения он работает по умолчанию! Не нужно добавлять z-index к заголовку карточки. Причина в том, что :before не будет отображаться над другими элементами, как :after.

Стилизация ссылок на основе расширения файла

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

Необычные случаи использования псевдо-элементов

Разделитель

Необычные случаи использования псевдо-элементов

В этом примере у нас есть разделитель с «or». С каждой его стороны у нас есть линия. Это можно сделать с помощью псевдо-элементов и Flexbox.

Обновление

Оказалось, что есть лучший способ сделать это. Мистер Скотт Зиркель отметил, что для такого рода вещей лучше использовать hr. Посмотрите демо на CodePen.

Автор: Ahmad Shadeed

Источник: https://ishadeed.com

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

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

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

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

CSS3. Основы

Прямо сейчас изучите CSS3 с нуля!

Смотреть

Метки:

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

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

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

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