デザイナーのためのCSS3テクニックのまとめ記事。デザイナーのために、と謳っているだけあって、わりと導入の簡単そうなものが多い印象。メニュー表現やコンテンツの凝った見せ方、画像ではないテキストエフェクト、スライドメニューなどが紹介されています。対応ブラウザはシャアの面では限られますが、ちょっとした装飾やプラスアルファの機能追加としてCSS3を導入する際に便利なまとめ記事。
CSS3で行えるなかなか興味深いデモ。デザイン的な表現よりも、動きを使った表現に重きを置いている印象。特にオモしろいのが、よくあるFlashバナーをCSS3で作ったらどうなるかという考察。結論から言えばほぼ同じものが作れます。作業工数や環境の成熟度など制作のプロセスは大きく違いますが、今後この程度の表現であればCSS3に移行していくんでしょうね。というかそうあってほしいというのが本音。
Smashing Magazineで行われていたCSS3コンテストの結果ページなんだけど、これがCSS3の作例紹介というかネタ帳としてなかなか秀逸です。デザイン、アイデア、機能性において素晴らしい作例がまとめられてます。画像を一切使わずに、CSS3だけで気合いで描いたグラフィック作品とかスゴいです。IEで見ると残念な感じになっちゃいますが、それはCSS3が残念なのではなくIEが残念という話でひとつ。
CSS3での各種機能追加は便利なんだけど、実際グラデーション指定のコード書きってメンドいよねそうだよね、という人にオススメ。サイト上でパラメータをいじくりながらCSSを出力できるウェブアプリ。グラデ以外にも角丸やドロップシャドウなども併せて指定できます。CSSのコードジェネレーターとしてなかなか優秀。
CSS3だけで描画するボタン。いわゆるPure CSSボタンです。まずHTML書いて、それから少しずつCSSを記述していく過程を、スクリーンショットを交えて紹介している点が興味深い。ある行を記述すると絵的にどう変わるのか、そのあたりがよく分かります。iPhoneやiPadなどのiOS端末や、Andoroid端末を対象にしたサイトではすでに実用的な技術なので、ぼちぼち覚えていきたいところ。
CSS3で表現できるボックス要素の角丸化だけど、画像に適用したところ思ったような効果が出せなくて、CSS TrickとjQueryを使って解決したYO！という内容の記事。記事を見ると、画像の四隅を角丸化したけど、ブラウザによっては角が丸くならなかったりボーダーが消えたりしたからそれを修正。その後jQueryを使ってドロップシャドウを加える手順とデモが紹介されてます。いずれ使う事があるかも、と思ったので備忘録。
画像を一切使わずに、CSSだけで描画されたiPhone関連グラフィック。リンク先を見ると結構驚きます。これで画像をひとつも使ってないというのはスゴい。CSS3のCanvasタグを軸に、角丸やグラデーションなどを併用して作られているようです。当然のようにCSS3未対応のブラウザでは見る事ができない上に、対応ブラウザによっても若干の差異が出そうです。これだけのグラフィック描画ができるCSS3もスゴいんだけど、根気良く作った作者の方に拍手です。
CSS3でできる事を、チュートリアルや作例を見つつ紹介するという内容の記事。動きを使った表現、タイポグラフィー、トランジション、リッチなメニュー表現、レイアウトなど、様々な新機能について紹介してます。最近じゃ仕事などの実務的な案件でも、部分的にCSS3の導入をされてる方も多いんじゃないでしょうか。特にモバイルフォンが対象となるサイトでは、すっかり実用的なコーディング方法となってます。ぼちぼち自分もちゃんと勉強しないとな、とか思ってましたが、こういうのって腰を落ち着けて勉強するよりも、実際に物作っちゃった方が早かったりしますね。
