Как изменить цвет выделения текста на сайте только с помощью 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)
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.
Случайные материалы
Прокрутка страницы
Шрифт Badhead
Отличное меню для сайта
POST данные модулей системы uCoz
Возвращаем старую форму входа на uC
Классическая форма входа для сайтов