CSS3を使ったクールなテクニックをまとめた記事。グラデーションを使ったボックス表現、RGBAを使った汎用的なボタン、ロテーションやボックス要素へのドロップシャドウを使ったフォトフレーム、CSS3で装飾するウェブフォームやドロップダウンメニュー、テキストを活かしたタイポグラフィーなどが紹介されてます。実際テキストシャドウはすでに多く使われてるし、CSS3も実用段階に入りつつあるんだな、とか思います。
CSSに関するトリックやTipsをまとめた記事。もちろん時期的にCSS3に関する内容も含まれます。縦方向のセンタリング、ショートハンド記述、角丸、IEハック、ベースフォントサイズの指定、縦方向100％、リンククリック時の点線の消去、CSSリセット、透明化、ClassとIDの優劣、テキストのイメージ置換、印刷時のページ切り替えなどがその内容の一部。CSSを使ったウェブ制作が当たり前になってきた今、ちょっと突っ込んだコーディングができると現場で重宝されそうです。
CSS3を使って表現する、ちょっと進んだナビゲーションメニューのまとめ記事。動きを使って表現するもの、丸角やグラデーションを使って画像なしで作ったもの、ドロップダウン、奥行きを持たせたメニュー表現などがあります。こうして見ると、CSS3を使う事で今まで表現するのが難しかった事がわりと簡単にできるようになるので、今後凝ったナビゲーションとか色々出てきそうです。
CSS3で描画するOperaロゴ。これなかなか興味深いです。CSS3の新要素として、角丸ボーダー、グラデーション、ボックスシャドウの3つを使って描画に挑戦。出来上がったソースを各種ブラウザで表示してみるとこうなるYO、という一覧付きです。ちなみにSafariのWebkit環境では問題なく表示できました。けどOperaは微妙ですね。IEについては何も言うまい、といったところでしょうかｗ
CSS3を使って表現する、各種ソーシャルメディアのアイコン。興味深いのが、これらのアイコンがCSS記述だけで表現されている点で、画像は1点も使ってません。デモサイトはこちら。ただしどのモダンブラウザでもオッケーというわけではなく、Safariでは角丸の表現が欠けており、またFirefox3.5ではグラデーションがうまく表示されませんでした。Firefox3.6環境で初めて作例のように表示されます。CSS3を思いっきり使った表現が、まだまだ実用的でない事が分かる作例です。けどFlickrやDeliciousのアイコンとかなかなか気合いが入ってます。
CSS3で新しく出来るようになる事の中で、わりと基礎的な事を紹介した記事。内容についてもシンプルで、RGBAについて、テキストシャドウ、ボックス要素の丸角描画、ボックスシャドウといった順に紹介されてます。RBGAやテキストシャドウについては、すでに導入しているサイトやブログが結構ありますね。
CSS3のアニメーション機能を使って、ローディング用のクルクルを作るというもの。作例一覧はこちら。Javascriptは使われていないようですが、当然ながら現状Firefox 3.5以上とWebkit環境でないと動かないそうです。画像使わなくてもいいとなると、単純にソースさえコピってしまえば動く事になるので、生産性が高まりますね。
CSS3からの新機能であるグラデーション描画についての考察記事。このプロパティ使えばいちいち画像作る必要がなくなって、作業が効率的になるYO！的な内容です。デモページはこちらから。ソース一式のダウンロードもできます。指定がわりと細かいというか面倒なので、今後グラデーション指定のウェブサービスとか出てきそうです。
