Главная » CSS, Веб-разработка

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

12 Февраль 2009 просмотров 2,478 комментариев 15


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


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

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

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

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

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

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

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

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



Этот текст при выделении никто не увидит.
А этот текст увидят злостные воришки

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

P.S. Перенесла на Eskhosting еще один сайт (благо на тарифе Блог можно разместить аж до 5 сайтов!), теперь вообще не переживаю за стабильность, все работает как часы.

Комментариев 15 »

  • ]]>Anton пишет: ]]>

    Хорошая вещица!!!  

    Цитировать

  • ]]>Человек дождя пишет: ]]>

    Супер! Не спасёт, конечно, от программ-скраперов. Но девочкам, наполняющим сайтыы-каталоги потихоньку-помаленьку, будет трудно :)  

    Цитировать

  • ]]>Valentin пишет: ]]>

    А сколько ещё интересных возможностей будет в css3  

    Цитировать

  • ]]>Yaci пишет: ]]>

    Вау.. хорошая задумка.. надо попробвать :)  

    Цитировать

  • ]]>webmasters_by пишет: ]]>

    может я чего то не понял, но каким образом это защитит от воровства контента?
    выделил и скопировал спокойно текст, вставил в блокнот и делай с ним все что хочешь.  

    Цитировать

  • ]]>Автор пишет: ]]>

    конечно это от воровства не защитит, но как “отпугивающее” средство, подействовать может  

    Цитировать

  • ]]>Zer0CooL пишет: ]]>

    От CTRL+U в FireFox’e еще никто не спасал =)))  

    Цитировать

  • ]]>melksoft пишет: ]]>

    вот кто бы сказал как сделано на клавогонках (klavogonki.ru) такая штука
    там когда набираешь текст нельзя скопировать, в буфер идет мусор  

    Цитировать

  • ]]>Vladimir пишет: ]]>

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

    Цитировать

  • ]]>Vladimir пишет: ]]>

    автору спасибо за интересную статью)
    к счастью, как и прежде, отключение javascript снимет почти любую защиту от копипаста  

    Цитировать

  • ]]>Алексей пишет: ]]>

    Да, спасибо. Интересный трюк.
    Конечно для защиты от копирования не пойдёт, а так, ради прикола.  

    Цитировать

  • ]]>Доктор Портфолиус пишет: ]]>

    Обалденная вещь! :)) Прямо удивился немеряно, когда увидел. :)  

    Цитировать

  • ]]>twiseetut пишет: ]]>

    Хех. Улыбнуло. Спасибо. Может когда нить и понадобиться…
    Css вообще интересная вещь…  

    Цитировать

  • ]]>Special пишет: ]]>

    Ну, и каким дебилам и на хрен это нужно? Тупорылым горе-дизайнерам, любящим дешёвку и такие же дешёвые эффекты? Как правильно было написано выше: “…девочкам, наполняющим сайтыы-каталоги…” Что самое главное: специалист всегда скопирует всё, что ему будет нужно, включая импорт всей базы товаров из какого-нить www-каталога. Все эти трюки и эффекты одних тупых для других таких же тупых. Благодарю за внимание.  

    Цитировать

  • ]]>Slavon пишет: ]]>

    Прикол :) в CSS3 много что делать мона только вот IE не поддерживается…а как известно 60% инета на IE висят  

    Цитировать

Комментарии

Добавьте ваш комментарий, или трекбэк с сайта. Вы также можете подписаться на комментарии к этой статье через RSS.

Вы можете использовать теги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Чтобы получить аватарку, зарегистрируйтесь на Gravatar.