CSSで行うレイアウトのネタがまとめられた記事。レイアウト例とそのソースを配布している12サイトをまとめた記事、と言った方が分かりやすいかも。サイト制作時のプロトタイピング（ワイヤーフレーム）の際に必ず出てくる「レイアウトどうすっかなー」という段階において役立ちそうです。わたくしシングルカラムレイアウトが苦手でして、なんつーか横幅いっぱいに使うのって難しくないですか？　サイドバーがあった方がデザインしやすいだなんて、典型的なブログ病と言えるんですが、なんつーか精進しないとイケませんね。

715 Awesomely Simple and Free CSS Layouts

CSS3を使ったテキストエフェクトの作例まとめ。主にtext-shadowを使ったテキスト装飾の手法が紹介されてます。text-shadowってただ単にドロップシャドウを落とすだけでなく、使い方次第ではエンボスっぽい見せ方もできるので、それとグラデーションや透過PNGを組み合わせたりすると、テキスト属性を活かしたまま色々できちゃうYO、という事がよく分かります。CMSがバックグラウンドにあるサイト制作においては、見出しなどをテキストではき出す事が多いので、そんなサイトで役に立ちそうな内容。

8 Examples Of Stunning CSS3 Text Effects

CSS3で行えるなかなか興味深いデモ。デザイン的な表現よりも、動きを使った表現に重きを置いている印象。特にオモしろいのが、よくあるFlashバナーをCSS3で作ったらどうなるかという考察。結論から言えばほぼ同じものが作れます。作業工数や環境の成熟度など制作のプロセスは大きく違いますが、今後この程度の表現であればCSS3に移行していくんでしょうね。というかそうあってほしいというのが本音。

10 Interesting CSS3 Experiments and Demos

Smashing Magazineで行われていたCSS3コンテストの結果ページなんだけど、これがCSS3の作例紹介というかネタ帳としてなかなか秀逸です。デザイン、アイデア、機能性において素晴らしい作例がまとめられてます。画像を一切使わずに、CSS3だけで気合いで描いたグラフィック作品とかスゴいです。IEで見ると残念な感じになっちゃいますが、それはCSS3が残念なのではなくIEが残念という話でひとつ。

CSS3 Design Contest Results

jQueryとCSSで作るドロップダウンメニューが25例まとめられた記事。出現プロセスや階層化の有無、並び方やトランジションなど、ドロップダウンにも色々あるのが分かります。これだけの数が揃ってると、だいたいどんな作例でも見つかりそうです。ベースとするスクリプトを探す際に便利な記事。

25 Beautiful Examples of jQuery and CSS Drop-down Menu Tutorials

CSS3だけで描画するボタン。いわゆるPure CSSボタンです。まずHTML書いて、それから少しずつCSSを記述していく過程を、スクリーンショットを交えて紹介している点が興味深い。ある行を記述すると絵的にどう変わるのか、そのあたりがよく分かります。iPhoneやiPadなどのiOS端末や、Andoroid端末を対象にしたサイトではすでに実用的な技術なので、ぼちぼち覚えていきたいところ。

Create a CSS3 Call to Action Button

CSS3で表現できるボックス要素の角丸化だけど、画像に適用したところ思ったような効果が出せなくて、CSS TrickとjQueryを使って解決したYO！という内容の記事。記事を見ると、画像の四隅を角丸化したけど、ブラウザによっては角が丸くならなかったりボーダーが消えたりしたからそれを修正。その後jQueryを使ってドロップシャドウを加える手順とデモが紹介されてます。いずれ使う事があるかも、と思ったので備忘録。

CSS3 Rounded Image With jQuery

PureCSSなイメージギャラリー。スライドやClick to view largeなどのリッチな表現が、JSなしで実装できる方法を紹介してます。PC環境ではなかなか環境が整ってませんが、スマートフォン市場じゃほとんどの端末がWebkitベースのブラウザを搭載しているので、HTML5やCSS3といった次世代のコーディングは、意外とモバイル環境から浸透していくのかもしれません。

10 Pure CSS3 Image Galleries and Sliders

ウェブにおけるナビゲーションというと、機能的にもデザイン的にも様々な手法がありますが、この記事では色々な作例とそのチュートリアルがまとめられています。ドロップダウンメニューやタブ、オンマウスによるフェード表現など、機能面やデザイン面、またはその両方において凝った作りのナビゲーション類がまとめられているので、メニュー制作のヒントになりそうです。

Website Navigation Menu Toolbox

CSS3でできる事と、すでに実装済みのサイト例を紹介した記事。デモサイトでは、新しく可能になる表現が色々とまとめられてます。記事下部にあるサンプルサイト紹介はなかなかホットです。すでにCSS3は現行の技術なんですね。「使うか使わないかの議論はあるけど、もうブラウザの対応を待ってる時じゃないYO！」みたいな内容で、実際俺も最近じゃ仕事でちょこちょこ使います。もちろん非対応ブラウザでクリティカルな差異が出ないような場所に限ってですが。

CSS Three — Connecting The Dots

このサイト素晴らしい。CSS3を使ったトランジションやトランスフォーム、アニメーションに関しての解説とチュートリアルをまとめたサイト。CSS3の新機能ごとに作例とチュートリアルが用意されているので、とても分かりやすいです。例えば変形に関しては、元がテキストデータであるため、テキスト情報を失わずに変形させられる点がイイですね。左のサムネールのキューブも、ちゃんとテキスト情報を残したままでグリグリできます。あと今までJavascriptを使って表現していたフェードやスライドなどのアニメーションも、CSS3だけで描画できるようになります。

Using CSS3 Transitions, Transforms and Animation

CSS3を使ったクールなテクニックと、そのデモを紹介したサイトをまとめた記事。単純に装飾面での新しい手法を見せるだけでなく、動きを使った表現が多く紹介されてます。どれもJavascriptなどは使わずに作られたPure CSSな作例です。Solar Systemなどを見ると、今までFlashを使って表現していたような事の多くが、いずれCSS3だけで行える事が分かります。とは言っても結局はユーザーのブラウザ環境に依存するので、これらの技術が本当の意味で実用的になるのはいつになるんでしょうね。

10 Mind-Blowing Experimental CSS3 Techniques and Demos