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

CSS3を使って表現する、新しいボタンデザインについての作例紹介記事。20の例が紹介されてますが、CSS3定番のtext-shadowを使ったドロップシャドウやエンボスデザインはもちろん、角丸やアルファチャンネル、グラデーションなどを使ったクールなボタンデザインの作例と手法について学べます。画像を使わない汎用的なボタンがCSSだけで描けるとなるとサイト制作の生産性が上がり、余った時間でモンハンができるというそんな流れですねコレ。

20 CSS3 Tutorials and Techiques for Creating Buttons

HTML5とCSS3を使った新しい表現と、そのチュートリアルを紹介した記事。この業界じゃ今現在最もホットな話題のひとつですな。「こんなタグが使えるようになるYO！」という流れの紹介記事ではなく、「この表現はこのタグを使ってやってるんDA！」的なアレです。表現主体で新しい技術を学ぶという意味ではナイスな記事。いやほんと、次から次へと学ぶ事の多い業界ですな。

Designing for the Future with HTML5+CSS3 : Tutorials and Best Practices