3D Bookmarklet - CSS3なブックマークレットで全てのウェブを3D化

2010年になって Web にも 3D の時代が到来 したわけですが、とはいえまだまだ多い
従来型の 2D ウェブサイトを自動的に 3D 変換してくれるブックマークレットを作りました。
Firefox 3.5、Chrome 5 で動作確認済みです。CSS3 が必要です。


3D Bookmarklet はコチラ

[3D] のリンク部分をブックマークツールバーにドラッグしてください。
どのウェブサイトでも、ブックマークレットを使うと、3D になります。
アナグリフ用の赤青メガネは、STEREOeYe SHOP さん などで入手して下さい。

とりあえず試してみる

iPad にも対応 しています。これで、世界中どこでも 3D!


OSDC.TW のハッカソン で Gugod とコラボした成果物です。謝謝!

仕組み


HTML ページのすべての要素のテキストカラー color を赤にして、10ピクセル程度ずらした
text-shadow で青を表示します。rgba() でアルファチャンネル付の色を指定しているのがミソ。
タグの種類や文字の大きさによって、3D のレイヤー(深度)も違うのに注意。
Firefox だと要素の style に !important が付けられないみたい。Chrome では OK。
赤青メガネの色(フィルタ)の特性によって、色を調整するとよりベターです。
3D になるのは文字のみ。写真(img 要素)などは、残念ながら 3D にはなりません。

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 2

面白い
ナイス

この記事へのコメント

この記事へのトラックバック