この記事素晴らしい。ボタンデザインに関する様々な考察と、それに関わる多くのリソースが紹介されてます。CSSでのボタンのベーシックなスタイリングに始まり、イメージとの併用、a:hoverやa:activeなどについて、テキスト量に応じて横幅が可変するSliding Doorsの紹介、CSSスプライトのチュートリアル、CSS3を使ったボタンデザインの新しい方法などについて書かれており、各項目や技術に関してはそれぞれリソースが紹介されています。後半ではPSDやCSS配布サイトの紹介などもされており、ボタンデザインに関する情報のまとめとしてよくできてます。特にSliding DoorsやCSS Spriteなど、ちょっとツッコんだCSSテクニックについてのリソースは参考になります。
CSSで角丸ボックスを作る方法がいくつもまとめられた記事。最近じゃCSS3を使う方法をよく見かけるけど、それだとIEユーザーの画面では描画されないので、角を丸くする事がマストのデザインであればCSS2で作成する必要があります。またJSを併用して描画する方法もあるので、サイトの趣旨やターゲットに沿った角丸ボックスの描画法が見つかると思います。まぁ画像でやっちゃうのが慣れれば早いという話でもありますが。
これなかなかアツい。簡単にできるCSS3を使ったトリック集なんだけど、ただ角丸にしたりテキストにブラーをかけるだけじゃなく、それらを動きを使って見せてます。説明するよりデモページを見た方が早いですね。各オブジェクトにオンマウスすると、Flashのトゥイーンみたいな動きでスタートとエンドの中間を補完する形で動きます。最初JS使ってるんだと思ってソースDLしたら、CSSだけでした。-moz-transition: all 0.1s ease-in-out;あたりがソレっぽいです。CSS3でこんな事できるんですね。これを指定したところでレガシーブラウザには特に悪影響なさそうなので、モダンブラウザユーザー向けにちょっとした一手間をかける事もできそうです。
Safari4、Firefox3.5、Google Chrome、Opera10、IE6,7,8における、CSS3とHTML5の対応状況が一覧になってます。これを見る限り、SafariとChromeではすでに多くの機能が実装されていて、言うまでもなくIEが最も遅れてる感じ。というかIEの場合はバージョン6,7,8がまとめて紹介されてるあたり、バージョンの数は増えても何も変わっていないという事がよく分かります。まぁいずれは実用段階になるとは言え、毎度のようにIEが足枷となる状況は容易に予想できますね。
今までちょっとしたテクニックを使って記述していたCSSソースが、CSS3を使う事でよりシンプルになるYOというお話。例えば角丸ボックスや、ボックスやテキストへのドロップシャドウ、透明度、バックグラウンドのサイズや複数背景の適用、カラム表現、ボーダー部へのイメージ適用、アニメーションなどの新しい手法が紹介されてます。基本的には「これからは新しい方法の方が楽だYO！」という話なんですが、これって裏を返せばCSS3でできる新しい表現を、古い方法で行うにはどうすればイイかと読む事もできます。古い方法で記述しなきゃならない理由とはつまりIE対策の事なんですが、しょうもないブラウザではあっても実際無視できないですからね。そんな感じでなかなか貴重なTips記事だと思います。
CSSだけで表現する、ポラロイド写真風のフォトギャラリー。ポラロイド風の枠を付けるところまでは現行のCSSだけでオッケー。その先のドロップシャドウ表現と、散らばった感じに角度を付ける点はCSS 3による新しいプロパティを使っています。傾ける表現がなかなか興味深い。ポイントは“ -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg);”の部分ですね。元の写真は傾いてないのに、上記指定をする事で角度を付けて見せる事ができます。またz-indexを使って、マウスオーバー時に必ず最前面に来るようにしている点も気が利いています。
CSS 3から使えるようになる新しいプロパティ、text-shadowを使って表現するプレス文字。text-shadowってまぁようするにテキストに対してドロップシャドウの効果を与えるプロパティなんですが、これの数値を工夫する事でプレス文字っぽく見せるというものです。作例では“text-shadow: 0px 2px 3px #555;”と指定されていて、この数値は左から順にシャドウのX軸の距離、Y軸の距離、ボカシ範囲、色を表しています。X軸の距離を0にするのがポイントみたい。Safariではかなり以前から先行実装されていたプロパティなので、CSS 3の新しい機能としては見る機会の多い表現ですね。
今日から使えるCSS3。「You CSS 3で書いちゃいなYO！」みたいなノリでサクっと使えそうです。まぁ対応ブラウザの普及率とかソレ系の小難しい話は別としてｗ アルファ、角丸表現、テキストシャドウ、ボックスシャドウ、背景の複数適用、オブジェクトのロテイションといったCSS 3で使えるようになる代表的な表現について書かれてます。回転できるんスね。これ地味だけど色々使えそう。早く当たり前に使って大丈夫な規格になってほしいもんです。
