Как изменить цвет выделения текста на сайте

Всем привет!
Нажимая и удерживая левую кнопку мышки, посетитель может выделить текст на сайте. А знаете ли вы, что стандартный цвет выделения можно заменить на любой подходящий к вашему дизайну.
Может, кто-то скажет, что это лишнее. А я думаю, можно побаловать заказчика таким красивым эффектом.

○ Как изменить цвет выделения текста на сайте
Для сравнения я вначале продемонстрирую стандартное выделения текста на сайте, чтобы сравнить с уже измененным.

- стандартный цвет выделенного текста на сайте:

- измененный цвет выделенного текста на сайте:

Для этого эффекта достаточно добавить вот такой небольшой код в файл с вашими CSS стилями:

::-moz-selection {
background-color: #сс0000;
color: #fff;
}
::selection {
background-color: #cc0000;
color: #fff;
}

Строки №2 и №6 – отвечают за цвет выделения.
Строки №3 и №7 – отвечают за цвет текста при выделении.
Если возникли затруднения с кодом цвета, вы можете подсмотреть мою шпаргалку и подыскать нужный вам цвет.

Хочу также сказать, что этот код подойдет абсолютно ко всем сайтам, движкам (WordPress, Joomla и др.)

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

8 Ответов на комментарий - Как изменить цвет выделения текста на сайте

1. Егор

   13.02.2016 в 20:20

   Я даже не знал что можно изменять цвет выделения текста.
   Интересный блог! Много чего нового узнал.
2. Сергей Высокин

   15.02.2016 в 11:53

   А всё-таки вот эта кнопочка “Поделиться” от UPTOLIKE, появляющаяся при каждом любом выделении нужного тебе текста (ну, удобно так выделять какие-то фразы при чтении для, скажем, более глубокого осмысления) – ужасно раздражает и даже, наверное, отчасти бесит. В самом деле, неужели не хватает единичных соцкнопок в конце или начале статьи? зачем всякий раз при каждом выделении передергивать внимание читетеля на эту вещь… Я начинаю склоняться к мнению “против этого”. Какой бы ни была цена за отказ от этого.
3. Сергей Высокин

   15.02.2016 в 11:57

   За статью спасибо! Ваще ништяк, супер, Степан, красавчик!
4. Степан => автор блога

   22.02.2016 в 08:28

   Спасибо, Егор, за похвалу! Оставайтесь моим читателем, я надеюсь Вас не разочаровать в интересных, полезных статьях!!!
5. Степан => автор блога

   22.02.2016 в 11:00

   Спасибо, Сергей, за Ваше мнение о “UPTOLIKE”. Я ценю Вашим мнением, но еще оставлю эту возможность. Если часто читатели будут жаловаться на эту возможность, тогда прислушаюсь к общему мнению и возможно я все исправлю. Еще раз спасибо за комментарий!
6. Степан => автор блога

   22.02.2016 в 11:02

   Пожалуйста, Сергей! В дальнейшем постараюсь не разочаровать статьями! Есть очень много интересных фишек для сайта, буду потихоньку ими делиться.
7. Людмила Лао

   29.02.2016 в 17:44

   О, это я всегда делаю)
   Очень нравится, чтоб и выделение текста гармонировало с общим стилем. Обычно по умолчанию голубой ставят.
8. Степан => автор блога

   01.03.2016 в 15:17

   Людмила, спасибо за комментарий

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

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: wordpress, без плагинов, Вебмастеру, для сайта, эффекты для сайта