mojwp.ru
Назад

Как изменить цвет фона при выделении мышкой текста

Опубликовано: 07.08.2014
2
1608

как поменять цвет фона при выделении мышкойПри помощи простого правила CSS вы можете поменять цвет фона и шрифта при выделении текста мышкой.

Это не даст + при продвижении, но если у вас часто выделяют текст и копируют, то ваши посетители удивятся подобной штуке. Главное - подобрать цветовую гамму.

Если честно, то я подглядел подобную штуку на читаемом мною портале и решил позаимствовать. Быть может и вас заинтересует подобное "украшательство" для своего сайта.

Меняем цвет при выделении мышкой

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

Добавляем в свой файл стилей шаблона (обычно style.css) следующие строки:

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

Сейчас мы задали правило для всех элементов на сайте. Можно задать для каких-то определенных свои настройки цвета. Например только для текста, который разбит на абзацы соотв. тегом:

p::-moz-selection{background: #000; color: #fff;} 
p::webkit-selection{background: #000; color: #fff;} 
p::selection{background: #000; color: #fff;}

В представленном коде мы делаем поддержку современных браузеров и задаем:

  • background: #000; - черный цвет фона. Можете менять на произвольный свой.
  • color: #fff; - цвет текста при выделении (сейчас белый). Так же меняйте на произвольный.

Чтобы подобрать необходимый цвет, можете воспользоваться пипеткой в программе FastStone Capture, либо одной из тысяч аналогичных пипеток в других программах.

Кто хочет, может добавить сюда новый курсор, который будет работать только над выделенным текстом. В помощь статья Стилизованный курсор на любом сайте за минуту.

Я не сторонник E-mail рассылок, но поговаривают что этот суперкачественный сервис почтовых рассылок обеспечит получение прибыли при минимуме затрат. Кто занимается продажей товаров/услуг, должен оценить потенциал сервиса.

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Артём Черкасов
    Опубликовано: 07.08.2014 Ответить на сообщение

    Темка интересная, какое-то разнообразие можно внести в свой ресурс.

  • Серега
    Опубликовано: 08.08.2014 Ответить на сообщение

    Спасибо за интересное решение, обязательно его реализую на своем ресурсе!

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.