革新的な最先端のCSSテクニックを学ぶ
Six Revisionsで最先端CSSの実例集『Innovative (and Experimental) CSS Examples and Techniques』が紹介されています。これってCSSだけで出来てるページ？ってのが25種類ほど紹介されているんですが、Demoだけのものやソースを公開しているもの様々です。
A Professional drop-down menu #12
一時期すごく流行ったドロップダウン式のメニュー。当時はJavascriptを使って表示させてました。ただし、スクリプトの書き方次第で非常に重いページになったりしていつの間にか廃れたような気がする。でもCSSだとかなり軽いからまた流行りだすかも。
3D - CSS puzzle
これが一番すごい！全部CSSで書かれたパズル。水の中に落ちるとゲームオーバーとなる。ただし、リプレイは画面をリロードしないといけない。でもやっぱりすごいわぁ。
A scrolling image map
画像下のスクロールバーをスライドさせて任意のイメージをクリックすると右側に大きく表示される。イメージマップとスワップイメージを合わせたようなスタイル。これもJavascriptを使ってならなんとなく出来そうな気はするけど、CSSで実現してしまうとはすごいな～。
Secret Message
これが一番のお気に入り。こういうトリッキーな感じは大好き。実用性でいうと何に使えるか困るけど、逆にこういうのをいかせるコンテンツページを作れるセンスが欲しいな。
CSS Decorative Gallery
こういった画像ギャラリーをCSSでデコレーションするなんて、、、逆にフォトショップなんかで加工する時点で画像として作った方が早くね？って気にもなるけど、画像自体を加工してしまうのに抵抗があるときは絶対必須なテクニックかな。
ソースを公開しているものはもちろんダウンロードして、そうでないものもページソースを見て移してみる。学ぶというよりパクルといった方がぴったりやけど、こうやっていろんな技術を身につけて、用途に応じて使い分けるってのはとても大事だと思う。
Flash、Javascript、CSSと特性を充分に把握して使い分けるというのはWeb作る上でユーザビリティを考えるってことにもつながるんとちゃうかな。
