コーダーのためのCSS Tipsが多数紹介された記事。ブラウザによる差異の消し方、縦位置センタリング、ボックスシャドウ、クロスブラウザMin Height、Clearfix、Webフォントのスタック、マルチボーダー、変形ボックスシャドウ、ボックス要素の角丸化、Blockquoteのスタイリング、テキストロテーション、背景の透過処理、IEのダブルマージン回避など、知ってると仕事が円滑になりそうなTipsが盛りだくさんです。これなかなかナイスな記事。コードもインラインで紹介されてて読みやすいです。
海外サイトでよく見かけるリボン風のヘッドラインのコーディングの仕方について解説されてます。リボンの折り返しの部分には透過PNGを使った一般的なデザインですが、「俺のコードはキレイだYO！」的な部分が見所。通常ならボックス要素を入れ子にして記述するHTMLソースが、h2だけでコーディングされてて、装飾部分はCSSに任せているのが特徴。このコーディングならデザインが変わった時の汎用性も高く、なかなかナイスです。
CSSだけで図形を描画するというもの。正方形に始まり、長方形、円、楕円、三角、平行四辺形、台形、ダビデ星、5角形、6角形、8角形、ハートと、様々なシェイプを描いてます。Safari環境では最後のハートだけウマく描画できませんでしたが、サイト内でよく使われる四角や三角といった簡単なパーツ製作に関しては、もうこの方法でイイんじゃないか、とか思いました。
レスポンシブウェブデザイン。なかなか聞き慣れない言葉ですな。これは閲覧するディスプレイのサイズによって、サイトのレイアウトを最適化しようという試みだそうです。リキッド（フルード）レイアウト、ソリッドレイアウト、エラスティックレイアウトに続く、レイアウトの新しい定義とでも言いましょうか。こうしたレイアウト手法が出てきた背景には、サイト閲覧のプロセスの多様化が理由として挙げられると思います。ようするに誰しもがPCからサイトを見ているわけではないヨと。最近じゃスマートフォンとかタブレットデバイスからも見てるヨと。それぞれの解像度に合ったレイアウトを、CSS3のMedia Queriesを使って最適化しましょうネと、まぁそういう事であります。もちろん似たような手法としてJSによるCSS切り替えという方法がより一般的ではありますが、今後CSS3の普及によりこちらの手法の方が主流になっていくような気がします。各リンク先のサイトを見ると、ウィンドウサイズによってリアルタイムにレイアウトが変わるので、なかなか楽しいです。ちなみにこのサイトそのものもレスポンシブ対応されているので、ウィンドウサイズをグリグリしてみましょう。
CSS3に関するチュートリアル記事をまとめたもの。ボタン、ロゴ、フォーム、テーブル、アニメーション、ロテーションなど、CSS3独自の機能を使った作例と、その制作工程に関するものです。この記事のナイスな点は、紹介されている点数が多い事。かなり多くの作例が紹介されているので、ダラダラ見ているだけでも勉強というかネタ収集になります。なかなかホットです。
CSS3のテキストシャドウやボックスシャドウを使った表現に関しての作例サイト。ページトップの画像が、古いプログレ好きには色々タマりませんな。このサイトで表現されているのは、シャドウを使ったちょっと凝った表現です。ソース見ると分かるんだけど、タイポのレトロな立体表現はブラーのないtext-shadowを複数重ねる事で描画されてます。ページ中部の元素表なんかもなかなかアツいです。動きに関してもCSSを使って行っているようで、なかなか気合いの入ったクールな作例と言えます。ちなみに俺は「Another side of the Moon」の次の「Wish you were here」がフェイバリットアルバムです。Pink Floydオタ的にデザインでグっときました。
10分でできるiPhone対応。1行のHTMLコードと、数行のCSSコードをコピペするだけでできるそうです。MA・JI・DE！？ CSS見て思ったのが、「あぁようするに全てのDIV要素のfloatをnoneにして、横幅320pxにするのね」という点。なるほどそれならサクっと、しかもそれなりに見れるレイアウトに変更する事ができそうです。けどDLでこういうレイアウトする人の書いたソースには難しいよな、とか思いました。自分のサイトで実験してみようかとも思いましたが、今のところやってません。サイトのiPhone対応をする必要に迫られた際に、選択肢のひとつとしてイイかもしれません。
CSS3を使ったテキストエフェクトの作例多数と、そのソースコードの紹介。どの作例も画像を使ってないので、ソースコードをコピペするだけで使えます。テキストシャドウやグラデーション、ボーダーの角丸、フォントフェイスなどの各種新機能を使った装飾例です。うーんCSS3って便利！ そして汎用的！ かつ美しい！ というわけで、レガシーブラウザ切り捨て上等な案件にはどんどん使っていきたいところですね。
