kzms2 – html,css,javascript

css3を触ってみて思った利点の3個目

この記事は、前回の記事（セレクタについて(2/4)その2 – css3を触ってみて思った4個の利点）の続きです。

1. レイアウト組むのが楽ちん
2. セレクタが便利
3. 画像に頼らず色々出来る
4. アニメーションが素敵

今回はCSS3を用いて、画像を使わないでリッチな表現にしてみます。
ちなみにこのページ自体も、デザインに大しては画像を使っていません。
アイコンはさすがに画像ですが…
※表示確認は、Firefox3.6、Chrome4、Safari4、Opera10で行っています。
このエントリーでは画像を使わないリッチな表現を表現する方法を紹介していきます。

詳細は続きから。

早速ですが作ったものの動画

というわけでこんな感じの物を作ってみました。
実際のサンプルはこちら

概要と対応ブラウザ

概要みたいなもの

タブにカーソルを合わせると少し光り、クリックすると中身がフェードインして切り替わります。
このサンプルで表現されているアニメーションやグラデーション、影や角丸などはすべてCSS3です。
JavascriptOFFでも同じ挙動になりますよ。

動作環境

Chrome4とSafari4での動作確認はしてあります。
Firefox3.5以上でもそれなりに動きますがアニメーションは動きません。
Firefox3.6↑だとグラデーションも有効になるように記述してあります。

詳細と実物は続きから。

いつのまにやら

GoogleChromeのExtensionが結構いい感じになってきていました。
どうやってインストールしたり作ったりするのか知らなかったので色々調べてみたら、もう結構出揃っている感じがしていました。
順調に仕様が整っていったら、Firefoxから乗り換える日が来てしまいそうです。。。

必要な環境

Chrome3だと導入する手順が大変みたいだったので、Chrome4のインストールがお手軽なのですが、現在まだベータなので使用する場合は、最終的には自己責任でお願いいたします。
実際に触ってみて良かったExtensionやインストールの仕方をちょこっと説明してみます。

詳細は続きから