2010年4月1日木曜日

どんなサイトも3Dにしてしまうブックマークレット(例外有り)

今年のエイプリルフールネタは、3Dが結構多いですよね。

3Dメガネを用意した人もいるとおもいます。
でも、せっかくだからいろんなサイトを3D化したい!というひとのために、
いろんなサイトを3D化するブックマークレットが有ります。
それがこちらです



javascript:(function(){e=document.createElement('style');e.innerHTML="*{text-shadow:red 2px 2px 0 !important;color:blue !important;}";document.body.appendChild(e)})();

このブックマークレットをブックマークに登録して、好きなサイトを開いた際に
このブックマークレットを選択すると、赤い文字と青い文字がずれて表示され、
3Dメガネをかけることによって、立体に見えます。

もちろん、このブックマークレットを直接アドレスバーに貼っても構いません。


上記のブックマークレットは縦横2ピクセルずつずれて表示されるようになっていますが、
自分で調整したい場合は、
text-shadow:red 2px 2px
2pxを自分の任意の数値に変更します

例えば横に5ピクセルずらすだけであれば
text-shadow:red 5px
でいいし(横のみの場合、2つめのpxを省略可)

縦に5ピクセルずらす場合は、
text-shadow:red 0px 5px
にします。

横に3ピクセル、縦に2ピクセルの場合は
text-shadow:red 3px 2px
です。


もともとこのtext-shadowは、文字に影をつけるという目的ですが、
このような3D表示にすることもできるんですね。

なお、これはあくまでも文字のみで、画像やフラッシュ等には適用されません。
また、文字もページの構成の問題で、すべての文字が適用されるわけでもないので注意してください

0 件のコメント:

コメントを投稿