CSS3のプロパティ、もう使っていますか？
2009.03.10 Categories：htmlマークアップ・CSS
まだ正式勧告には至っていませんが、CSS3、みなさんもう使っていますか？
すべてのブラウザとはいきませんが、FirefoxやSafari、Operaなどの最近のバージョンは結構CSS3に対応していたりします。
IEだけ効かなかいものについては、jQueryを補完的に使うことで解決します。
そんなプロパティの中で、今でも使える便利なものについてご紹介します。
・text-shadow
文字に影（シャドウ、グロウ）をつけられます。
見出しをテキストで作りたくても、素っ気なさすぎてイマイチな時に、これを使えばより見出しらしくできそうです。
・nth-child
テーブルの<tr>に交互に背景色をつけることができます。
表が見やすいように色をつけるってよくしますよね。
でもひとつおきにclassをつけるのはあまりスマートじゃないから好きではなかったのですが、これでスッキリ解決です。
・opacity
画像の透明度を変化させることができます。
これでナビゲーションのロールオーバーの表現が簡単になりますね。
ちなみにIEには効きませんが、IEは独自のfilterというプロパティがあるので、それを使えば大丈夫です。
・border-radius
ボックスの角を丸くすることができます。
これはFirefox3、Safari3、chromeのみ対応ですが、角丸でもそうでなくても情報を得られるかどうかの点で言えば問題ないので、使ってもいいのではないかと思います。
また上記を組み合わせることで、こんな面白い表現もできます。
・ウィンク効果
fadeとopacityをpositionで重ねた画像に使うと、Flashのような効果が得られます。
・スライドショー
上記のウィンク効果とjQueryで表現できるタブパネルを組み合わせると、スライドショーのような見せ方ができます。
jQueryはCSSのプロパティが使えて記述のルールも似ているので、プログラムが苦手な人でもわりと簡単に使うことができそうです。
CSS3とjQueryを使ったよりリッチなWebサイトが、今後ますます増えてきそうですね。
Written by：y213
コメント
コメントはまだありません。
