От создателя: псевдо-элементы употребляются уже в течение долгого времени. Тем не наименее, есть некие случаи использования, которые, как мне кажется, не стопроцентно известны разрабам. Я написал эту статью, чтоб пролить свет на их, и чтоб их можно было употреблять больше.
Так как псевдо-элемент принадлежит собственному родительскому элементу, для этого есть несколько необыкновенных вариантов использования. А пока давайте разглядим обычной пример, чтоб показать, что я имею в виду.
В макете есть заголовок раздела с маленьким кружком слева от него. Когда мы наведем курсор на заголовок раздела, круг станет больше.
CSS .section-title:before { content: «»; width: 20px; height: 20px; background: blue; /* Other styles */
}
.section-title:hover:before { transform: scale(1.2);
}
| 1234567891011 | .section-title:before { content: «»; width: 20px; height: 20px; background: blue; /* Other styles */} .section-title:hover:before { transform: scale(1.2);} |
Просто и просто. Давайте расширим эту теорию наиболее полезными вариациями использования.
Раздел проекта / блога
На моем веб-сайте есть раздел, в каком перечислены все мои проекты. Я желал добавить эскиз для всякого проекта, но для меня это не было ценностью. Для меня важнее сама ссылка. В первый раз я узрел этот эффект некое время вспять на веб-сайте Итана Маркотта.
Приведенный выше макет дизайна показывает идею, которую я желал применить. Любая цветная ссылка в абзаце имеет связанный псевдо-элемент.
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 ishadeed.com and a11ymatters.com on CSS, UX Design and Web Accessibility.
| 123 |
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 ishadeed.com and a11ymatters.com on CSS, UX Design and Web Accessibility. |
1) Я добавил отступы к разделу Hero
Я желаю зарезервировать пространство для псевдо-элементов, для этого предусмотрены отступы.
Подразделение Google Area 120 начало тестирование ботов для Tables
2) Позиционируем псевдо-элементы полностью
Чтоб позиционировать их полностью, мне необходимо найти, с каким родителем они соединены. Направьте внимание на GIF ниже, как удаление position: relative для раздела .hero влияет на псевдо-элементы.
3) Добавление псевдо-элементов
Крайний шаг — добавить псевдо-элементы вкупе с эффектами наведения. Ах так я это сделал:
CSS .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; }
}
| 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 .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;
}
| 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 с обыкновенными стилями, как показано ниже.
CSS .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;
}
| 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 .elem:before, .elem:after { content: «»; position: absolute; top: 2px; width: 50%; height: 100%;
}
%MINIFYHTMLdd0c6d0c369c70f169d76c91f2a0b1e014% %MINIFYHTMLdd0c6d0c369c70f169d76c91f2a0b1e015%
.elem:before { left: 0; background: grey;
}
.elem:after { right: 0; background: #000;
}
| 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 .elem:before { transform: skew(-2deg);
}
.elem:after { transform: skew(2deg);
}
| 1234567 | .elem:before { transform: skew(-2deg);} .elem:after { transform: skew(2deg);} |
Дальше я добавлю к любому псевдо-элементу z-index: -1, чтоб переместить их на задний план.
Опосля этого я сделал последующее:
добавил filter: blur
Уменьшил непрозрачность
Добавил градиент от прозрачного к черному (чтоб скрыть края псевдо-элементов в верхнем центре родителя)
Окончательный код:
CSS .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);
}
| 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 к остальным вложенным элементам, чтоб псевдо-элемент не перекрывал их. Давайте возьмем настоящий пример.
Вот обычная карточка, которая состоит из миниатюры и заголовка. Если вы увидели, под текстом есть наложение градиента, чтоб создать текст наиболее точным в случае, если изображение очень светлое.
Title here
| 1234 |
Title here |
Чтоб добавить наложение градиента под текстом, мне необходимо будет употреблять псевдо-элемент. Какой из их вы выберете? :before либо :after? Давайте разглядим оба.
1) :after
В этом случае заголовок покажется под наложением псевдо-элемента, как показано ниже.
Решение данной для нас препядствия заключается в добавлении z-index к заголовку карточки. Даже если это обычное и резвое решение, это не верно.
CSS .card-title { /*Other styles*/ z-index: 1;
}
| 1234 | .card-title { /*Other styles*/ z-index: 1;} |
2) :before
При использовании элемента :before для наложения он работает по дефлоту! Не надо добавлять z-index к заголовку карточки. Причина в том, что :before не будет отображаться над иными элементами, как :after.
Стилизация ссылок на базе расширения файла
К примеру, если у нас есть ссылка с файлом PDF, можно добавить иконку PDF, чтоб создать ее наиболее понятной для юзера. Вот вам наглядный пример того, как показать иконку PDF для ссылки:
Download PDF
Download Doc
| 12 |
Download PDF Download Doc |
CSS a[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;
}
| 12345678910 | a[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.
Or
CSS p { 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;
}
| 12345678910111213141516171819 | p { 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.
Вам также может понравиться