cssとHTMLのみで擬似的な3D表示を実現するCSS 3D Meninas - かちびと.net
これ凄いです。僕が知らなかった だけかも知れませんが、この動き でjs等も使用していないのは驚き でした。cssとHTMLのみでマウス オーバーした際の画像に3D効果 を出しています。 動作はIE8、Firefox3、Opera9、Safari 3、Chrome4などで動作するそうです。 マウスオーバーし、左右に動かすと画像も動きます。 複数の透過レイヤーを重ねてhoverで動きを出しているみたい。何枚かの画像と下記のような画像を使ったｃｓｓスプライトを使って実現しているようです。 この効果はmootoolsやjQueryのプラグイン(mParallaxやjParallax)を使えば同じ表現を実現出来ます。 実用性は期待できませんが、cssとHTMLだけっていうのが凄い。ソースは以下でご確認下さい。 Pure CSS 3d Meninas (説明ページ：CSS 3D Meninas)
ピュアCSSで実装する折り鶴の影の動きが凄い
以前ご紹介した、cssとHTMLのみで 擬似的な3D表示を実現するCSSと 同じサイトで、また素晴らしいテクニック を公開してくれました。今回のcssは 素晴らしい動きをする折鶴の影を実装 します。 以下がそのテクニックです。IE8, Safari 4, Firefox 3.5, Chrome3, Opera10などでご覧下さい。 CSS Paper Bird 縦横のスクロールバーを動かすと影が動くようになっています。素晴らしいアイデアとトリックですね。。 ソースはこちらでご覧下さい。本当にjs使ってないみたいです。ブログでの説明はこちら。 コカコーラのも凄い。。Roman Cortesというサイトのブログ、今後も注目したいところです。 Roman Cortes
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
