Ваш промокод mojWPAds на плагин рекламы для WordPress >>

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

как поменять цвет фона при выделении мышкойПри помощи простого правила 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 рассылок, но поговаривают что этот суперкачественный сервис почтовых рассылок обеспечит получение прибыли при минимуме затрат. Кто занимается продажей товаров/услуг, должен оценить потенциал сервиса.

Привет.

Меня зовут Виталик. Я автор этого блога и Магазина WordPress https://wp-r.ru/.


Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 2 комментария
  1. Артём Черкасов says:
    http://zarabotka.guru/

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

  2. Серега says:
    http://sevelweb.ru

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

Не держи в себе. Выскажись.

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

© 2011-2017 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 11.5MB | MySQL:109 | 0,272sec
Лучшие плагины для сайта WordPress
Магазин WordPress WP-R.ru
Я понял, не показывай больше.
Смотри мои обучающие видео на YouTube
Сайт использует cookie
Друг, не уходи!