Главная
Web-дизайн
Цвет выделенного текста

Цвет выделенного текста

Цвет выделенного текста

Доброго времени суток. 🙂

Когда Вы создаете дизайн для своего сайта или какой-то страницы, Вы можете использовать всевозможные цветовые схемы. Иногда нужно использовать такую схему, при которой выделенный текст просто незаметен. Для некоторых это не проблема и вообще незаметный факт, но есть сайты, которые служат тому, чтобы с них копировали информацию.

Столкнувшись с тем, что выделенный текст, попросту не видно, Вы можете изменить внешний вид выделенного текста и сделать так чтобы все стало так, как нужно. Поможет Вам в этом CSS. В частности параметр - selection.

Если Вам надо задать всему сайту одинаковые стили выделения текста, то просто допишите в файл стилей следующие строки, которые по сути одно и то-же, но выполняют задачу по кроссбраузерности:

::selection {
background: #ffb7b7;
color:#fff;
}
::-webkit-selection {
background: #ffb7b7;
color:#fff;
}
::-ms-selection {
background: #ffb7b7;
color:#fff;
}
::-moz-selection {
background: #ffb7b7;
color:#fff;
}

Можете поменять цвет выделения и цвет текста на нужный Вам. Если нужно присвоить разные стили для отдельных абзацев или определенных элементов, перед параметром ::selection пропишите класс или id нужного элемента. НАпример:

.block::selection {
background: #ffb7b7;
color:#fff;
}

Все просто и при правильном подходе поможет Вам решить маленькую проблему, которая может появится. Лично я использовал этот способ в противоположном назначении. Заказчик попросил сделать так, чтобы выделенный текст не имел фона и цвет не менялся. При выделении было такое ощущение, что текст не выделен. Своего вида защита от копипаста :), хоть и не очень действенна.

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(4 голоса, в среднем: 5 из 5)

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий