четверг, февраля 12, 2009

CSS3 трюк: “скрытое послание” :)

Спонсор месяца:
СПб гостиницы - мини-отель Гринвич.


Очень жалко, что этот трюк возможен (без использования JS) только в CSS3, т.к. уж очень удобно было бы им воспользоваться, чтобы отпугивать воров контента :) Смотрите сами:

пример CSS3 трюка со скрытым текстом

На месте воришки, я бы задумалась прежде чем копировать контент :) Теперь, давайте посмотрим, как это делается.

Seo конкурс линкомаулия. Конкурс по продвижению сайтов.

На самом деле, все до ужаса просто. Чтобы реализовать такой трюк нам понадобиться псевдо-класс ::selection, который мы применим к абзацам текста:

p::selection { background: #f00; } p::-moz-selection { background: #f00; } 

Префикс -moz- необходим, чтобы трюк работал и в FF.

Таким образом, при выделении текста мышкой, он полностью закраситься в черный цвет. А чтобы оставить то самое “скрытое послание”, достаточно нужные слова заключить в какой-либо еще тег, например <span> и прописать правила “читабельности” текста. И тогда получаем следующее:

<style type="text/css"> p::selection { background:#000;color:#000; } p::-moz-selection { background:#000;color:#000; } p span::selection { background:#fff;color:#000; } p span::-moz-selection { background:#fff;color:#000; } </style> <p>Этот текст при выделении никто не увидит. <span>А этот текст увидят злостные воришки</span></p>

Рабочий пример можно увидеть на сайте Ph.Creative, просто выделите весь текст мышкой.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru