• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Меняем цвет при выделении текста на CSS (Пример изменения цвета при выделении на CSS)
Меняем цвет при выделении текста на CSS
Kosten
Среда, 19 Июня 2019 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44269
Награды: 70
Многие задавались вопросом, как можно поменять оттенок цвета при выделение текста, это когда на каком то сайте что то копируешь, где видишь, что выделение текста идет совершенно другим оттенком. Теперь вы сами у себя на сайте сможете сделать, а точнее задать некоторым описанием.

Такой эффект трюка можно очень быстро добиться веб мастеру, где нужно задействовать отвечающий псевдоэлемент ::selection который отвечает за функционал.



HTML

Код
<h2>Зелёный цвет</h2>

<p class="green">Пример зелёного цвета при выделении текста</p>

<h2>Красный цвет</h2>

<p class="red">Пример красного цвета при выделении текста</p>

<h2>Голубой цвет</h2>

<p class="blue">Пример голубого цвета при выделении текста</p>

CSS

Код
::selection {background: #b1a8a8;}
::-moz-selection {background: #b1a8a8;}

p.red::selection {background: #f7a7a7;}
p.red::-moz-selection {background: #f7a7a7;}

p.blue::selection {background: #51bef1; margin-bottom:30px;}
p.blue::-moz-selection {background: #51bef1;}

p.green::selection {background: #65dc6d;}
p.green::-moz-selection {background: #65dc6d}

Где уже самостоятельно можно выставить тот оттенок цвета, что соответствует дизайн сайта.

Демонстрация
Прикрепления: 3917842.png (93.6 Kb) · CodePen_Export_.zip (3.4 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Меняем цвет при выделении текста на CSS (Пример изменения цвета при выделении на CSS)
  • Страница 1 из 1
  • 1
Поиск: