サイトデザインをする上で、とにかく『クロスブラウザ対応』にしなければならないほど労力が必要な作業はないと思う。
いろいろなブラウザが発表されて選択肢が増えるのはいいけど、その対応がてんでバラバラだとサイト制作者としては重荷になるわけで。
まあそれはそれとして、最近HTML5やCSS3の仕様が気になってきている。
とくにSafari4の最新版をインストールした後、初めてアプリケーションを立ち上げるときに再生される『ようこそムービー』が、9割方HTML+CSSでできているということに感動したものだ。
現状はまだまだ現場での対応は控えるものの、実際どんなことができるのかはいち制作者として気になる。
ということで、「CSS3でどんな表現ができるか」を試せるサイト、「westciv」がおもしろい。
■CSS3でどんなことができるか
１）線形グラデーション
２）放射勾配
３）テキストシャドウ
http://westciv.com/tools/shadows/index.html
４）ボックスシャドウ
http://westciv.com/tools/boxshadows/index.html
５）テキストのストローク
http://westciv.com/tools/textStroke/index.html
６）変形
http://westciv.com/tools/transforms/index.html
左カラムのスライダーやカラーピッカーで効果の調整。
右カラム上が実行結果、その下がCSS3のコード。その下に対応ブラウザ情報とアイコン。
※すべての効果を試すことができるのはCSS3に完全対応しているSafari4のみ。
一部Firefox3.5、Opera10でも試せる。IEは全滅…。
■効果について
以下、Safariで実行してみた結果。
いろいろおもしろい。
まだ試行錯誤が必要だろうけど、近い将来本気でFlashが不要になりそう。