背景を大きくBodyいっぱいに使ったクールサイトの紹介記事。この手のサイトの多くはFlashを使って制作されますが、最近ではCSS & Javascriptで同様の表現をするサイトもあるようです。ページ下部ではそうしたNon Flashサイトもいくつか紹介されてます。実際画面いっぱいに大きくFlashを使ったサイトってロードが遅い上に、「えぇい！もう面倒だ！」と思ってCmd + Wを押しても、今度はFlashプラグインがテンパって閉じる事もすぐにできなかったりして、アレだしナニです。ただしこうしたサイトデザインは、質の良い写真や素材があって初めてできる表現なので、多少案件を選びますね。
CSSを使ってクールに表現するコンタクトフォーム。inputフォームをいかにも「ここが入力欄です」という感じで見せない工夫や、便せんやメモ帳などのメタファーを活かした表現など、デザインする上でのいい勉強になります。けどこの手の凝ったフォーム表現って時間かかるんスよねぇ・・・。納期に余裕のある案件でやってみたいところ。
今までJavascriptを使って行ってきた表現を、CSSだけで行うという30の作例が紹介された記事。マウスオーバーによる拡大やドロップダウンメニュー、イメージマップ、Lightbox代替、コンテンツスライダー、Tooltip、アコーディオン、グラフ生成、アニメーション、タブ切り替えと、様々な表現が紹介されてます。こうして見るとCSSだけでも色々できちゃうんですね。とは言ってもIE6は未サポートだったり、ものによってはデメリットもあったりします。導入が簡単な代わりに使いどころが限定されるかもしれません。
ナイスなCSS Tipsが紹介された記事。「liをクラス指定せずに3カラムで並べる」や「高さ指定したボックスの一番下にボタンとかを配置したい」、「dt / ddを横並びにする」、「hrに画像を使う」といったテクニックが紹介されてます。コーディングする人にならきっと分かる、かゆい所に手が届く的なアレがとってもナイスです。
CSS3だけで描画するグラフィカルなボタン。各色ともにa:link、a:hover、a:activeそれぞれが設定されています。CSSだけで描けるということは、つまり画像ファイルが1つも必要ないということ。ウェブ制作における生産性が大きく高まります。今日も仕事中に同僚とその話をしてたんだけど、結局のところその可能性を妨げてるのはIEで、IE早くなくなれとかそういう結論に至りました。世界共通のウェブ屋独特のアレですな。ちなみにデモサイトはこちらです。
Webkit (Safari, Chrome)、Mozzira (Firefox)、IEで使えるCSSグラデーションの描き方。CSS3にてサポートされるグラデーションの描画機能は、今までみたくいちいちグラデ用の画像ファイルを用意しなくても済む点が便利。CSS3のサポートが遅れているIE環境への対策もできている点で、汎用的だと言えます。こちらのデモサイトから各ブラウザでちゃんと表示できるかどうか確認できます。
グリッドレイアウトを簡単に行うための、CSSフレームワークが集められた記事。CSSライブラリで有名どこと言うと、俺的には960 GridSystemとかBlueprintあたりかなーという印象なのですが、当然どちらも紹介されてました。これ系のライブラリって作業工数を減らす事も大事だけど、レイアウトのコーディングを規格化するという点にも意味があるような気がします。あと960GSに同梱されてるPSDはなかなか使い勝手が良くエキサイティングです。
テキストの上にマウスを持ってくる事で、モリっと伸びてくるテキスト。CSS3のtext-shadowとtransformを使った新しい表現。シャドウのかけかたも、いわゆる通常よく見るドロップシャドウとは違ってて、なんていうか古くて新しい感じ。80年代のJudas Priestっぽいというか、いやこの例えは分かりづらいかｗ リンク部分のちょっとした装飾にイイですねこれ。
