ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CSS3 Action FrameworkはCSS3製のオープンソース・ソフトウェア。HTML5に注目が集まっているが、同時に見逃せないのがCSS3だ。良く角丸やドロップシャドーがCSSだけでできるようになると言われているが、他にも様々な効果がCSSのみで可能になる。


ピクチャ 39.png

CSSだけでオブジェクトの回転

 

これまでは同様の効果を出すためにはJavaScriptの利用が必須だった。だがこれからは簡単なアクションであればCSSだけで実現できるようになる。そのサンプルとして注目したいのがCSS3 Action Frameworkだ。

CSS3 Action FrameworkはJavaScriptを使わずCSSのみで作られている。だがマウスをオブジェクトの上に載せたり、クリックによって効果を出せるようになっている。効果はサイズの変更や回転とその組み合わせ、ドロップシャドー、さらに消失などだ。


ピクチャ 38.png

GoogleトップページをCSS3でリデザイン

 

にわかには信じがたいが、ソースを見る限りJavaScriptは読み込んでいないのでCSSのみなのだろう。そうした効果を組み合わせてGoogleのインデックスページを作り替えたデモもある。デザイナーの方はもちろん、開発者の方も必見のライブラリだ。

 

css3-action-framework - Project Hosting on Google Code

 http://code.google.com/p/css3-action-framework/

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2