5 приемов CSS3 с псевдоэлементами ::before и ::after

Большинство людей считает, что большой разницы между псевдоклассами и CSS active нет. Но одно различие между ними все-таки существует.

Мы все знаем, что данные классы и элементы используются как часть CSS3. Данные псевдоэлементы были определены в CSS3.

Разница между псевдоклассами и псевдоэлементами

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

К примеру,:hover,:active

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

Например,::after,::before

Для псевдоклассов мы используем одно двоеточие( :), а для псевдоэлементов — двойное( ::), которое будет частью синтаксиса CSS3. Браузеры поддерживают оба типа синтаксиса, но в IE(ниже 9 версии) не поддерживается формат двойного двоеточия( ::).

Важным свойством псевдоэлементов hover active CSS будет content: “ ”.

Значения свойства content:

content: «» content: «любое конкретное значение»

Сейчас рассмотрим приемы работы с псевдоэлементами.

Способ 1: Псевдоэлементы со шрифтом Awesome

Согласно последним тенденциям веб-дизайна, большинство веб-сайтов используют Font Awesome для создания шрифтов иконок, а не картинки. Что увеличивает скорость загрузки веб-сайта.

Пример:

Программный код HTML:

  • Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Программный код CSS:

ul li::before { content: "f054"; font-family: FontAwesome;}

Сейчас посмотрите на рисунок, приведенный ниже.

Результат:

5 приемов CSS3 с псевдоэлементами::before и::after

Способ 2: Псевдоэлементы с фоном

Вы когда-нибудь пробовали задать фоновое изображение для какого-нибудь элемента, используя li active CSS? Если нет, тогда посмотрите приведенный ниже код.

Пример:

Код HTML:

I have the background Image

Код CSS:

h2::after { width: 100%; height: 23px; content: ""; background: url("../images/separator.png") no-repeat center center; display: block;}

Посмотрите на рисунок, приведенный ниже.

Результат:

5 приемов CSS3 с псевдоэлементами::before и::after

Способ 3: Псевдоэлементы с содержимым

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

Пример :

Код HTML :

<p>This is an example of Pseudo </p>

Программный код CSS :

p::after { content: "Elements"; display: inline-block;}

Результат :

5 приемов CSS3 с псевдоэлементами ::before и ::after

Способ 4: Псевдоэлементы с незаданным смещением

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

5 приемов CSS3 с псевдоэлементами ::before и ::after Пример c hover active CSS :

Код HTML :

<div class=”container”> <div class=”left”>This is an example</div> <div class=”right”>This is an example</div></div>

Программный код CSS active :

.container::after,.container::before     { content: ""; display: block;}.container::after         { clear: both;}.left                     { margin-right: 15px; padding: 25px; width: 60%; float: left; background: #2a2a2a; color: #fff; text-align: center; min-height: 95px;}.right                    { padding: 25px; width: 25%; float: left; background: #2a2a2a; color: #fff; text-align: center;}

Вот окончательный результат после применения явного свойства с использованием псевдоэлементов :

Результат :

5 приемов CSS3 с псевдоэлементами ::before и ::after

Способ 5: Псевдоэлементы с наложением цвета при наведении

Одна из последних тенденций в графическом дизайне — эффекта наложения цвета при наведении. Для этого можно использовать псевдоэлементы:

5 приемов CSS3 с псевдоэлементами ::before и ::after Пример :

Программный код HTML :

<ul>   <li>      <img alt="Image" src="images/thumb.jpeg">      <p>Lorem Ipsum</p>   </li>   <li>     <img alt="Image" src="images/thumb.jpeg">     <p>Lorem Ipsum</p>   </li></ul>

Код li active CSS :

ul li                { width: 49%; padding: 0 5px; display: inline-block; text-align: center; position: relative;}ul li img            { max-width: 100%; height: auto;}ul li p              { margin: 0; padding: 20px; background: #ffffff;}ul li::after         { height: 100%; content: ""; background: rgba(0,0,0,0.8); position: absolute; top: 0; left: 5px; right: 5px; opacity: 0;}ul li:hover::after,ul li:hover::before  { opacity: 1; cursor: pointer;}ul li::before        { content: "Hover Text"; position: absolute; top: calc(50% - 12px); left: calc(50% - 40px); color: #ffffff; opacity: 0; z-index: 10;}

Результат :

5 приемов CSS3 с псевдоэлементами ::before и ::after
Сейчас вы сможете применить описанные в статье приемы работы с hover active CSS в ваших проектах.

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

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