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 にはなりません。
従来型の 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 にはなりません。
この記事へのコメント