CSSを使って、シークレットなメッセージを表示させる方法

  • このエントリーをはてなブックマークに追加

CSS3を使って、本文に秘密のメッセージを隠す方法をご紹介します。
ただし、この方法は、InternetExploreではCSS3の1部の機能しかサポートしていませんので機能しません。

理屈は簡単で、<span></span>の背景色をselectionタグを使って文字色と同化させているだけです。

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の<p></p>の中に文章を入れて、その中の隠したい文字の部分を<span></span>で囲んで下さい。

<p>こんにちは、しぶりびです。
最近、<span>かちびと.netの中の人</span>とお会いする機会が多くなりました。</p>

サンプルはこちら
文章をすべてドラッグすると隠されたメッセージを見る事が出来ます。

その他、下記にはジェネレーターもあります。
CSS Secret Message Generator

CSS-Tricks http://css-tricks.com/

参考にした記事はこちら

CSS Trick: Hidden Messages


Ph.Creative http://blog.ph-creative.com/

end
  • このエントリーをはてなブックマークに追加

Leave a Comment.