Как изменить цвет выделения текста на сайте только с помощью CSS
- 01 Мар 16 в 13:58
- Дизайн сайта
Сегодня я Вам расскажу как изменить цвет выделения текста на сайте только с помощью CSS.
Делается это очень просто, нужно только прописать несколько не сложных строк в стилях CSS. Здесь мы рассмотрим как сделать один цвет выделения для всего текста на сайте, а так же сделаем отдельные цвета для того текста который мы захотим, другими словами для каждого текста отдельный цвет.
Делается это очень просто, нужно только прописать несколько не сложных строк в стилях CSS. Здесь мы рассмотрим как сделать один цвет выделения для всего текста на сайте, а так же сделаем отдельные цвета для того текста который мы захотим, другими словами для каждого текста отдельный цвет.
Цвет выделения для всего текста на сайте
Код
::selection {background: #00b4f0;color:#fff;}
::-moz-selection {background: #00b4f0;color:#fff;}
::-webkit-selection {background: #00b4f0; color:#fff;}
::-moz-selection {background: #00b4f0;color:#fff;}
::-webkit-selection {background: #00b4f0; color:#fff;}
Цвет выделения для отдельного текста на сайте
Код
p.red::selection {background: #FFB7B7;}
p.red::-moz-selection {background: #FFB7B7;}
p.red::-webkit-selection {background: #FFB7B7;}
p.blue::selection {background: #67cfff;}
p.blue::-moz-selection {background: #67cfff;}
p.blue::-webkit-selection {background: #67cfff;}
p.green::selection {background: #78e780;}
p.green::-moz-selection {background: #78e780;}
p.green::-webkit-selection {background: #78e780;}
p.red::-moz-selection {background: #FFB7B7;}
p.red::-webkit-selection {background: #FFB7B7;}
p.blue::selection {background: #67cfff;}
p.blue::-moz-selection {background: #67cfff;}
p.blue::-webkit-selection {background: #67cfff;}
p.green::selection {background: #78e780;}
p.green::-moz-selection {background: #78e780;}
p.green::-webkit-selection {background: #78e780;}
Как видите, что для каждого цвета мы задали свой класс. Теперь давайте посмотрим как это будет выглядеть в HTML:
Код
<p class="green">Пример зелёного цвета при выделении текста</p>
<p class="red">Пример красного цвета при выделении текста</p>
<p class="blue">Пример голубого цвета при выделении текста</p>
<p class="red">Пример красного цвета при выделении текста</p>
<p class="blue">Пример голубого цвета при выделении текста</p>
Всего комментариев: (0)
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.
Случайные материалы
Плавная прокрутка по блокам с jQuer
39 ресурсов для дизайнеров, разрабо
30 полезных инструментов и ресурсов
Стили и эффекты для кнопки
Flat кнопки
Выход с сайт с уведомлением в uwnd