Скрытые послания с помощью CSS3

В этой статье поговорим о небольшом трюке для сокрытия сообщений (посланий) в тексте с использованием новшеств CSS3. Для этого мы будем использовать ::selection для изменения цвета выделения.

::selection — это новшество, добавленное в CSS3, в настоящее время не поддерживается ИЕ. Идея трюка заключается в изменении цвета фона при выделении текста на веб странице:

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

::-moz-selection используется для поддержки Firefox, поэтому нужно использовать оба атрибута. Этот изменит фоновый цвет на красный. Так как же нам использовать для сокрытия сообщений? Просто. Нужно лишь изменить цвет текста и цвет выделения на на один и тот же цвет, не важно какой. Для тех слов в тексте, которыми Вы хотите передать свое тайное послание, следует указать другие цвета выделения или шрифта при выделении. Например так:

<p>Эти слова мы скроем.
<span>А эти покажем</span></p>
 
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; }

Тайное послание готово!
Демо смотрим здесь.

Запись опубликована в рубрике HTML & CSS с метками , . Добавьте в закладки постоянную ссылку.

Добавить комментарий

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">