大きな可能性を秘めているCSS3。
対応ブラウザの問題など、まだまだ実際に活用するには不都合が多かったりしますが、
もうすでにCSS3の実験的デモページは数多く公開されています。

そんなCSS3で実現できる機能を最大限に活かした、優れたデモページを集めたエントリー
「25 Amazing CSS3 Experimentations and Demos」が衝撃的。

25AmazingCSS3.jpg
25 Amazing CSS3 Experimentations and Demos | Vandelay Design Blog

ページ内の全てがCSSのみで構成されているものから、
jQueryなどJavaScriptを使用しているものもありますが、
Flashと見間違えるようなデモページばかり。

いくつかピックアップすると…
(SafariなどCSS3に対応したブラウザで見てください。)

Look Ma, No Flash!
LookMaNoFlash.jpg

iPadの画面内にスパイダーマンのアニメーションが流れます。
これがFlashではないというのがすごいの一言。
絵が若干シュールなところが◎。

Old School Clock with CSS3 and jQuery | CSS-Tricks
CSS3Clock.jpg

秒針付きの時計をブラウザで表現。
動きも正確で綺麗。

Paul R. Hayes: Experiment: Multiple 3D Cubes with animation using CSS
CSS3_3D.jpg

3D立方体をCSS3で表現しています。
各面にはテキストも掲載。
立方体はマウスオーバーでスライドします。

これらの機能を実務などで使用できるようになるまでには
まだまだ時間がかかりそうですが、今のうちからある程度のテクニックは真似ておきたいものです。

これらのデモページを見ていると
CSS3とjQueryに加えて、HTML5がフル活用になった時には
ほんとFlashが要らなくなる日も来るのではないか、とも感じてしまいます。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

驚きのCSS3のデモ25選「25 Amazing CSS3 Experimentations and Demos」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR