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

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

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

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

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

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

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

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

CSS

1234567891011.section-title:before {    content: “”;    width: 20px;    height: 20px;    background: blue;    /* Other styles */} .section-title:hover:before {    transform: scale(1.2);}

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

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

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

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

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

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

123<section class=”hero”>    <p>Hello, my name is Ahmad. I’m a UX Designer and Front End Developer that enjoys the intersection between design and code. I write on <a href=”www.ishadeed.com” class=”link-1″>ishadeed.com</a> and <a href=”www.a11ymatters.com” class=”link-2″>a11ymatters.com</a> on CSS, UX Design and Web Accessibility.</p></section>

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

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

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

READ
Советы по оптимизации JavaScript и улучшению загрузки сайта

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

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

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

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

Крайний шаг — добавить псевдо-элементы вкупе с эффектами наведения. Ах так я это сделал:

CSS

1234567891011121314151617181920212223242526.link-1 {  color: #854FBB;} @media (min-width: 700px) {  .link-1:after {    content: “”;    position: absolute;    right: 0;    top: 20px;    width: 150px;    height: 100px;    background: currentColor;    opacity: 0.85;    transition: 0.3s ease-out;  }   .link-1:hover {    text-decoration: underline;  }   .link-1:hover:after {    transform: scale(1.2);    opacity: 1;  }}

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

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

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

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

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

Повышение размера кликабельной области

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

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

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

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

Наложения

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

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

CSS

12345678910111213141516.hero {  position: relative;  height: 300px;  background: url(“image.jpg”) center/cover;} .hero:after {  content: “”;  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  background-image: linear-gradient(180deg, #851717 0%, #30328C 100%);  mix-blend-mode: color;}

Округленные тени

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

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

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

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

READ
Как обнаружить блокировщик рекламы

CSS

123456789101112.elem {     position: relative;     display: flex;     align-items: center;     max-width: 400px;     background: #fff;     padding: 2rem 1rem;     font-size: 1.5rem;     margin: 2rem auto;     text-align: center;     box-sizing: border-box;}

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

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

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

CSS

123456789101112131415161718.elem:before,.elem:after {    content: “”;    position: absolute;    top: 2px;    width: 50%;    height: 100%;} .elem:before {    left: 0;    background: grey;} .elem:after {    right: 0;    background: #000;}

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

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

CSS

1234567.elem:before {    transform: skew(-2deg);} .elem:after {    transform: skew(2deg);}

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

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

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

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

добавил filter: blur

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

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

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

CSS

1234567891011121314151617181920212223242526272829303132333435.elem {  position: relative;  display: flex;  align-items: center;  max-width: 400px;  background: #fff;  padding: 2rem 1rem;  font-size: 1.5rem;  margin: 2rem auto;  text-align: center;  box-sizing: border-box;} .elem:before,.elem:after {    content: “”;    position: absolute;    top: 3px;    width: 50%;    height: 100%;    z-index: -1;    background: linear-gradient(to bottom, transparent, #000);    filter: blur(3px);    opacity: 0.3;} .elem:before {    left: 0;    transform: skewY(-2deg);} .elem:after {    right: 0;    transform: skewY(2deg);}

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

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

Внедрение :After либо :Before

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

READ
РСЯ запустила рекламу, вознаграждающую пользователя за просмотр

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

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

1234<article class=”card”>  <img src=”article.jpg” alt=””>  <h2>Title here</h2></article>

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

1) :after

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

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

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

CSS

1234.card-title {    /*Other styles*/    z-index: 1;}

2) :before

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

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

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

12<p><a href=”example.pdf”>Download PDF</a></p><p><a href=”example.doc”>Download Doc</a></p>

CSS

12345678910a[href$=”.pdf”]:before {  content: “”;  display: inline-block;  vertical-align: middle;  margin-right: 8px;  width: 18px;  height: 18px;  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/182774/np_pdf_377198_000000.svg) center/20px no-repeat;  padding: 3px;}

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

Разделитель

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

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

1<p>Or</p>

CSS

12345678910111213141516171819p {  display: flex;  align-items: center;} p:before, p:after {  content: “”;  height: 2px;  background: #c5c5c5;  flex-grow: 1;} p:before {  margin-right: 10px;} p:after {  margin-left: 10px;}

Обновление

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

Создатель: Ahmad Shadeed

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

Комментарии

comments

Оценить статью
Блог о самом интересном.
Добавить комментарий