サイト内検索:

これは凄い。CSS3によるインタラクティブなライティング効果

3D transforms are awesome, but they're even cooler with lighting effects!

Interactive CSS3 Lighting Effects

CSS3の3D transformsは凄いけど、そこにライティング(光)効果が絡むともっとクールになるよね、ってことで、実際に実装してみたらほんとにクール!

サイトにアクセスすると以下のようにAppleっぽい反射が施されたiPadがあるのですが、

このiPadをマウスでいじくってみるとあら不思議。光の反射効果がリアルタイムに画像に反映されるではありませんか!
しかもiPadの影までちゃんと変化しちゃうし!

The specular highlights are created with CSS gradients and masks. The cast shadow relies on box shadows and transforms. (Best in Safari)

その反射はCSSグラデーションとマスクで実現されているようです。Best in SafariということでSafariで見たんですが、Chromeでも大丈夫でした。

汎用ライブラリ化されていないので使い方は面倒かと思いますが、これ見た誰かがきっとなんかやってくれそうな気がします。

blog comments powered by Disqus

2011年アルファブロガー受賞

新着DVD

モバイル

Powered by Movable Type 6.1.2

ブログ内検索

BlogPeople ReviewMe!

このサイトのレビューとか応援コメントを書いてもらえると励みになります。

Affi☆List for Amazon

バナー広告

このブログ記事について

このページは、nagasawaが2011年12月13日 20:27に書いたブログ記事です。

ひとつ前のブログ記事は「MITが1 Trillion FPSで撮影可能なカメラを開発。」です。

次のブログ記事は「12月14日のラッキーさん」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。