CSSに関するトリックやTipsをまとめた記事。もちろん時期的にCSS3に関する内容も含まれます。縦方向のセンタリング、ショートハンド記述、角丸、IEハック、ベースフォントサイズの指定、縦方向100％、リンククリック時の点線の消去、CSSリセット、透明化、ClassとIDの優劣、テキストのイメージ置換、印刷時のページ切り替えなどがその内容の一部。CSSを使ったウェブ制作が当たり前になってきた今、ちょっと突っ込んだコーディングができると現場で重宝されそうです。

47 CSS Tips & Tricks To Take Your Site To The Next Level

CSS3を使って表現する、ちょっと進んだナビゲーションメニューのまとめ記事。動きを使って表現するもの、丸角やグラデーションを使って画像なしで作ったもの、ドロップダウン、奥行きを持たせたメニュー表現などがあります。こうして見ると、CSS3を使う事で今まで表現するのが難しかった事がわりと簡単にできるようになるので、今後凝ったナビゲーションとか色々出てきそうです。

15 CSS3 Navigation and Menu Tutorials and Techniques

CSS3で描画するOperaロゴ。これなかなか興味深いです。CSS3の新要素として、角丸ボーダー、グラデーション、ボックスシャドウの3つを使って描画に挑戦。出来上がったソースを各種ブラウザで表示してみるとこうなるYO、という一覧付きです。ちなみにSafariのWebkit環境では問題なく表示できました。けどOperaは微妙ですね。IEについては何も言うまい、といったところでしょうかｗ

Opera Logo with CSS

CSS3を使って表現する、各種ソーシャルメディアのアイコン。興味深いのが、これらのアイコンがCSS記述だけで表現されている点で、画像は1点も使ってません。デモサイトはこちら。ただしどのモダンブラウザでもオッケーというわけではなく、Safariでは角丸の表現が欠けており、またFirefox3.5ではグラデーションがうまく表示されませんでした。Firefox3.6環境で初めて作例のように表示されます。CSS3を思いっきり使った表現が、まだまだ実用的でない事が分かる作例です。けどFlickrやDeliciousのアイコンとかなかなか気合いが入ってます。

Create Social Media Icons in Pure CSS

CSS3で新しく出来るようになる事の中で、わりと基礎的な事を紹介した記事。内容についてもシンプルで、RGBAについて、テキストシャドウ、ボックス要素の丸角描画、ボックスシャドウといった順に紹介されてます。RBGAやテキストシャドウについては、すでに導入しているサイトやブログが結構ありますね。

The Basics of CSS3

CSS3のアニメーション機能を使って、ローディング用のクルクルを作るというもの。作例一覧はこちら。Javascriptは使われていないようですが、当然ながら現状Firefox 3.5以上とWebkit環境でないと動かないそうです。画像使わなくてもいいとなると、単純にソースさえコピってしまえば動く事になるので、生産性が高まりますね。

CSS3 Loading Spinners Without Images

CSS3からの新機能であるグラデーション描画についての考察記事。このプロパティ使えばいちいち画像作る必要がなくなって、作業が効率的になるYO！的な内容です。デモページはこちらから。ソース一式のダウンロードもできます。指定がわりと細かいというか面倒なので、今後グラデーション指定のウェブサービスとか出てきそうです。

Speed Up with CSS3 Gradients

CSS3を使ったアニメーション作例のまとめ記事。CSS3だけで作られたものもあれば、jQueryなどのJavascriptを併用して作られたものもあります。ちょっとした動きであればCSSだけで記述できというのがナイスですね。ぼちぼちこの手の作例も多く見られるようになりました。あー勉強しなきゃな。

50 Awesome Animations made with CSS3

一般的なメールフォームを、CSS3を使って装飾した作例。デモページはこちら。ソースもダウンロードできます。作業の流れとして、まずはCSS2.1レベルでコーディングしてから、その後でCSS3独自のプロパティを追加していきます（Step3から）。例えばボックスシャドウ、グラデーションなどがそれ。そして最後に、CSS3未サポートのブラウザ用に画像切り出しなどを行っています。「レガシーブラウザ使う奴が悪いんだYO！」という乱暴な事はせず、仕上げの作業が丁寧な点が素晴らしい。

Design a Prettier Web Form with CSS 3

CSS3のtext-shadowプロパティを使って美しくデザインされたサイトのまとめ記事。Safariではかなり以前のバージョンからすでに実装されていたので、CSS3の新しい機能の中ではわりとおなじみの機能ですね。このプロパティを使えば、ドロップシャドウの他にもエンボスっぽい演出もできるので、画像に頼る機会が減りそうです。MetalabとかMark Jardineあたり特に好き。

30 Examples Of CSS Text Shadows Out In The Wild

CSS3で作るドロップダウンメニュー。デモページはこちら。Javascriptは使われていないようです。必要な画像ファイルもグラデーション用のpng1枚だけ。それを縦方向に移動させる形で、グラデーションの濃淡を表現してるみたい。ボタンの角丸表現やテキストシャドウなど、CSS3の機能が多く使われているのに、CSS3をサポートしていないブラウザでもそれなりの再現度があるようで、汎用的に使えそうなコードですね。

CSS3 Dropdown Menu

最近急に増えてきたCSS3がらみの記事。これ系の記事って紹介内容がよくカブるんですが、いくつか見たことのない内容が入っていたので紹介。テキスト装飾に関するもの、ロテーションに関するもの、ボーダー背景に関するもの、埋め込みフォントに関するものなど、CSS3の主要な新機能と、それらを使った作例が紹介されてます。インクレディブルな感じです。

18 Incredible CSS3 Effects You Have Never Seen Before