@IT さん にて「Webグラフィックをハックする」という連載を執筆することになりまして、その第一回が先週公開されました！

5分でわかるCSSグラフィック
http://www.atmarkit.co.jp/fwcr/design/benkyo/webgr...

CSS のグラフィック周りの機能（text/box-shadow, gradient, trasition, animation, 2D/3D transform, filter) の使い方をできるだけ簡潔にまとめて、短時間で把握できるようにしました。一回読んで終わりではなく、書式とサンプル中心でリファレンス的に使っていただける内容となっているのがユニークな点かと思います。今後も同様に SVG や Canvas、 WebGL 等を紹介していく予定なので、ご期待ください。

で、本日は上記の記事のフォローアップとして、執筆中に集めた参考になるサンプルの情報をまとめておきます。余裕があれば記事の最後に掲載しようと思っていたのですが、構成上入れられなくて・・・ (^^ゞ

39 Box Shadows

http://viget.com/uploads/file/boxshadows/

box-shadow を使用したさまざまなサンプルが公開されています。使っているテクニックについての解説はこちら。少し前に公開されたもので、以前の仕様に基づいた書き方になっている部分もありますが、トランジションや アニメーションを使ったものもあるので、それらのサンプルとしても参考になります。 Google Chrome 用とのことで、他のブラウザでは表示されないので注意してください。

Css3 box shadow

http://www.webdesignshock.com/css3-box-shadow/

box-shadow や transform 等を活用して、ボックスの端をカールさせるエフェクトのさまざまなバリエーションを作り出しています。 CSS3 の活用方法もさることながら、 dashed の border を薄くかけてテープの切り口を表現するなど、細かいこだわりが光っています。

CSS3 Patterns Gallery

http://lea.verou.me/css3patterns/

こちらは記事でもご紹介しましたが、 gradient を利用したさまざまな背景パターンが公開されています。すべて画像を利用せず CSS のみで実現されています。そのパターンの多彩さも驚きですが、それらの CSS コードがブラウザ上で編集できて、リアルタイムに結果が反映されるのが素晴らしい。結果を確認しながらパターンをカスタマイズできますし、仕組みの勉強にもなります。

3D CSS Text Generator

http://www.3dcsstext.com/

text-shadow で文字が浮き出しているようなエフェクトを実現するコードを生成するジェネレータです。高さやグラデーション等をスライダーで調整して、結果の CSS のコードが取得できます。プレビューにさり気なく transition が適用してあって、パラメータを変更するとニュルッとアニメーションするのもいい。 text-shadow にも transition かかるんだ、というのを初めて知りました（笑）

text shadow box

http://www.zachstronaut.com/lab/text-shadow-box/te...

手前からライトで照らして、奥の壁にテキストの影が写っている、というような表現をするデモが公開されています。角度によってブラーの量を調整したりしていて、芸が細かいです。

Pure CSS GUI icons

http://nicolasgallagher.com/pure-css-gui-icons/demo/

CSS のみで描かれたミニアイコンが多数公開されています。画像を使っていないとは思えないほど凝ったデザインのものばかりです。 generated contents をうまく利用していて、複雑なマークアップも必要ありません。 CSS で描いてあればサイズも自由に変更できますし、状態によって色を変えたり、その気になればアニメーションも自由自在。実はかなり使えるアイディアだと思います。

isocube

http://www.zachstronaut.com/lab/isocube.html

transform を利用して平行投影の 3 次元表現を行なっているデモです。 3D transform ではなく、 2D transform を工夫して実現しているようですね。変形後でもテキスト選択や動画の再生やボタンのクリックが動作しているのがわかります。

DOM Tree

http://hakim.se/experiments/css/domtree/

こちらはいろいろな DOM 要素を 3D transform してクリスマスツリーを作っています。難しいけど、チェックボックスがちゃんとチェックできる。

CSS 3D Clouds

http://www.clicktorelease.com/code/css3dclouds/

3D transform を用いてボリューム感のある雲や爆発を表現するサンプルです。コントローラで生成する雲をカスタマイズしたり、フルスクリーンに切り替えたりもできるのが凄い。

3D CSS Tester

http://thewebrocks.com/demos/3D-css-tester/

3D transform のパラメータを変更して、効果を確認できるツールです。それぞれのパラメータがどのような効果を持つのか理解するのに役立ちます。

Creative CSS3 Animation Menus

http://tympanus.net/codrops/2011/10/24/creative-cs...

transition や animation を利用したアニメーションするメニューのデモ 8 種類と、その仕組の解説があります。デモはいずれも動きに凝ったものになっていて、インパクトが必要なときのアイディアとして参考になります。

Snow Stack

http://www.satine.org/research/webkit/snowleopard/...

3D transform で壁面のギャラリーのような効果を作っているデモです。カーソルキーで選択していくと、壁面が傾いて多くの画像を見渡すことができます。まるでデスクトップの画像管理ツールのような UI ですが、 3D transform の機能を用いると、こんなことも実現できるんですね。

今回の記事を書いて改めて思いましたが、 CSS3 の機能を利用すると Web ページの表現力は劇的に向上しますね。今でこそ Web ページのレイアウトは紙の延長ですが、近い将来にはまったく違ったものになっているかもしれません。 CSS3 普及後の Web ページのあり方に思いを巡らせてみるのも面白いですね。