CSSを使って表現する、新しいテクニック50というまとめ記事。新しいというだけあって、ものによってはCSS3を使った描画も含まれます。記事下部ではCSSジェネレーターなどのオンラインツールも紹介されていて、プロ・アマ問わず役に立ちそうなまとめ記事です。仕事でコーディングしてる人が見ても、「あーこんな事できるのね」的な発見があります。紹介されてる量も多く、なかなかナイスです。
画像もJSも使わずに描画された、凝ったデザインのチェックボックス。クリックするごとにオンとオフが切り替わる仕組み。パっと見どう見ても画像なのに使ってないって事は、Canvasで描いてるんでしょうか。ただし現状SafariやChromeなどのWebkit環境では正確にレンダーされるものの、FirefoxやOpera、IEなどでは表示できないそうです。アイコンデータがないためでしょうか。デザイン的にも汎用性という意味でもなかなかアツい手法なので、今後に期待。スイッチというメタファーも秀逸です
グラデーションやドロップシャドウを使った、CSS3で行うテキストエフェクトまとめ。色々できますが、ようするに“drop-shadowプロパティを使ったクールな表現”という言葉に集約されますね。drop-shadowはただ単にテキストに影を落とすだけでなく、例えば右下方向にブラーのない白を描画する事でエンボスっぽく見せる事もできます。CSS3を導入したクールサイトでよく見かける手法です。「これくらいの事ならわざわざフォトショップでやんなくても済んじゃうYO！」みたいな感じで、どんどん導入していきたいですな。
CSS3で作られた汎用性の高いボタン。ラムネというか錠剤というか、そんな印象のなかなか凝ったデザインです。文字は当然テキストで書かれていて、またclass名を変更するだけでデザインを簡単に変える事ができ、またマウスオーバーでのハイライトにはフェード処理がされています。中には形を変える指定もあり、ボタンとしてなかなか盛りだくさんな内容。現在ダウンロードボタンが死んでいるようですが、その内復活するでしょう。ナイスですねぇこれ。
CSSで行うレイアウトのネタがまとめられた記事。レイアウト例とそのソースを配布している12サイトをまとめた記事、と言った方が分かりやすいかも。サイト制作時のプロトタイピング（ワイヤーフレーム）の際に必ず出てくる「レイアウトどうすっかなー」という段階において役立ちそうです。わたくしシングルカラムレイアウトが苦手でして、なんつーか横幅いっぱいに使うのって難しくないですか？ サイドバーがあった方がデザインしやすいだなんて、典型的なブログ病と言えるんですが、なんつーか精進しないとイケませんね。
CSS3を使ったテキストエフェクトの作例まとめ。主にtext-shadowを使ったテキスト装飾の手法が紹介されてます。text-shadowってただ単にドロップシャドウを落とすだけでなく、使い方次第ではエンボスっぽい見せ方もできるので、それとグラデーションや透過PNGを組み合わせたりすると、テキスト属性を活かしたまま色々できちゃうYO、という事がよく分かります。CMSがバックグラウンドにあるサイト制作においては、見出しなどをテキストではき出す事が多いので、そんなサイトで役に立ちそうな内容。
CSS3で行えるなかなか興味深いデモ。デザイン的な表現よりも、動きを使った表現に重きを置いている印象。特にオモしろいのが、よくあるFlashバナーをCSS3で作ったらどうなるかという考察。結論から言えばほぼ同じものが作れます。作業工数や環境の成熟度など制作のプロセスは大きく違いますが、今後この程度の表現であればCSS3に移行していくんでしょうね。というかそうあってほしいというのが本音。
Smashing Magazineで行われていたCSS3コンテストの結果ページなんだけど、これがCSS3の作例紹介というかネタ帳としてなかなか秀逸です。デザイン、アイデア、機能性において素晴らしい作例がまとめられてます。画像を一切使わずに、CSS3だけで気合いで描いたグラフィック作品とかスゴいです。IEで見ると残念な感じになっちゃいますが、それはCSS3が残念なのではなくIEが残念という話でひとつ。
