Свои цвета выделенного текста

selectioncolor.gifВ спецификации 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 будет применен данный эффект, а для всего остального текста — цвета браузера по-умолчанию.

17.09.2009

Автор: Игорь Квентор
www.websovet.com

Если статья оказалась для вас полезной, пожалуйста, поставьте свою оценку и поделитесь в соцсетях:

1 Star2 Stars3 Stars4 Stars5 Stars (Вы еще не оценили)
Загрузка...

Похожие записи:

Подпишитесь на рассылку блога Вебсовет, чтобы первыми получать самые интересные материалы:

Оставить комментарий: