CSS-эффекты выделения текста | Цвет, фон, тень, предотвращение выделения | День 2 | 50 дней промежуточных проектов HTML + CSS

Оформите веб-страницу в соответствии с вашей темой, изменив эффекты выделения текста🔥.

👉🏻 Мы будем использовать родительский класс change, внутри которого мы определим 4 класса, чтобы узнать CSS-выделение текста.

Выделение текста по умолчанию без CSS-стилей

HTML

<p>
  <b>SELECT ME :</b> This is the default text selection styling.
</p>

👉🏻 Вот как это будет выглядеть…

🎯 Изменение цвета выделения текста с помощью CSS

HTML

<p class='change change-color'>
  <b>SELECT ME :</b>
  Now the text will show different text color on selection.
</p>

Мы будем использовать псевдоэлемент

CSS

.change-color::selection {
  color: rgba(3, 218, 198, 1);
}

👉🏻 Вот как это будет выглядеть- 🔥

🎯 Изменение цвета фона текста при выделении с помощью CSS

HTML

<p class='change-background-color'>
  <b>SELECT ME :</b>
  Now the text will show different text background color on selection.
</p>

CSS

.change-background-color::selection {
  background-color: #ff8080;
}

👉🏻 Вот как это будет выглядеть…

🎯 Изменение тени текста при выделении с помощью CSS

HTML

<p class='change-shadow'>
  <b>SELECT ME :</b>
  Now the text will show different text-shadow on selection.
</p>

CSS

.change-shadow::selection {
  text-shadow: 1px 1px 0 #ff1a1a;
}

👉🏻 Вот как это будет выглядеть…

🎯 Изменение цвета фона текста, цвета текста и тени текста при выделении с помощью CSS

HTML

<p class='change-color-shadow-background'><b>SELECT ME :</b>
  Now the text will show different text-color, text-shadow and text-background-color on selection.
</p>

CSS

.change-color-shadow-background::selection {
  text-shadow: 1px 1px 0 #27ae60;
  color: white;
  background-color: #ffd24d;
}

👉🏻 Вот как это будет выглядеть…

🎯 Использование универсального ::selection

Вместо того чтобы использовать ::selection в каждом объекте, используйте его только один раз для всего тела. Убедитесь, что стилизация соответствует вашей теме.

CSS

::selection
{
  background-color: #121212;
  color: #fffffff;
}

❌ Предотвращение выделения текста пользователем с помощью CSS❗

CSS

{
 -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

Задача дня 💡

Сделайте страницу в темном режиме и страницу в светлом режиме и настройте страницу в соответствии с темой.

Совет дня 💡

Используете Chrome?
Используйте эти расширения, чтобы улучшить веб-стиль.

1. WhatFont — Проверьте стили шрифтов, используемых на любой веб-странице.
2. ColorZilla — Узнайте цвет любого пикселя на странице.

Проверьте серию!
❤️ Счастливого кодинга!
Следите за продолжением!