画像無しでリッチな表現(3/4) – css3を触ってみて思った4個の利点
css3を触ってみて思った利点の3個目
この記事は、前回の記事（セレクタについて(2/4)その2 – css3を触ってみて思った4個の利点）の続きです。
- レイアウト組むのが楽ちん
- セレクタが便利
- 画像に頼らず色々出来る
- アニメーションが素敵
今回はCSS3を用いて、画像を使わないでリッチな表現にしてみます。
ちなみにこのページ自体も、デザインに大しては画像を使っていません。
アイコンはさすがに画像ですが…
※表示確認は、Firefox3.6、Chrome4、Safari4、Opera10で行っています。
このエントリーでは画像を使わないリッチな表現を表現する方法を紹介していきます。
詳細は続きから。
まずはじめに
これから記述する書き方は、有名どころのブラウザに適用する書き方をしています。
本来なら1行ですが、CSS3はまだ正式には勧告されていないので、各ブラウザでの独自実装という形になっているため、サンプルでは複数行記述されています。
- 「-moz-」が含まれるものはMozilla(Firefox)に対しての記述
- 「-webkit-」が含まれるものはWebkit(Safari,Chrome)に対しての記述
- 「filter」が含まれるものはIEに対しての記述
→他のものと記述方法がかなり異なるので注意
これらを踏まえて見てもらえると良いかと思います。
説明は次ページから。
