Свои цвета выделенного текста на сайте при помощи CSS3
В спецификации CSS 3 есть интересная фишка — можно сменить цвета выделенного текста на своем сайте с тех, что используются по-умолчанию браузерами, на свои собственные.
Полезная эта фишка или нет — каждый решит самостоятельно. В IE она не работает (про 8-й не знаю, не проверял). Однако несомненно, данный эффект может (не)приятно удивить тех, кто копирует ваши нетленки. Особенно, если сделать цвета выделения одинаковыми с фоном. Вроде что-то выделил, а ни черта не видно.
Для реализации эффекта достаточно добавить в лист стилей CSS парочку правил:
::selection {
background: #add2e1;
color: #000;
}
::-moz-selection {
background: #add2e1;
color: #000;
}
Первый набор работает на браузеры Opera, Chrome и Safari, а второй — для FireFox-а. В самих наборах все достаточно прозрачно: background задает цвет фона для выделения, color — цвет самого шрифта соответственно.
Обратите внимание: перед каждым из правил стоят двойные двоеточия. Никаких пробелов ни до, ни после них быть не должно. Если вам, к примеру, нужно задать такой эффект для какой-либо конкретной части текста на сайте, то пишите это следующим образом:
p.text::selection {
background: #add2e1;
color: #000;
}
Соответственно, для абзаца с классом text будет применен данный эффект, а для всего остального текста — цвета браузера по-умолчанию.
