画像無しでリッチな表現(3/4) – css3を触ってみて思った4個の利点

備忘録, 感想

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

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

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

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

詳細は続きから。

まずはじめに

これから記述する書き方は、有名どころのブラウザに適用する書き方をしています。
本来なら1行ですが、CSS3はまだ正式には勧告されていないので、各ブラウザでの独自実装という形になっているため、サンプルでは複数行記述されています。

  • 「-moz-」が含まれるものはMozilla(Firefox)に対しての記述
  • 「-webkit-」が含まれるものはWebkit(Safari,Chrome)に対しての記述
  • 「filter」が含まれるものはIEに対しての記述
    →他のものと記述方法がかなり異なるので注意

これらを踏まえて見てもらえると良いかと思います。

説明は次ページから。

Pages: 1 2 3

2 Comments »

  1. 画像無しでリッチな表現(3/4) – css3を触ってみて思った4個の利点 … – 今回はCSS3を用いて、画像を使わないでリッチな表現にしてみます。 ちなãhttp://ow.ly/16bGpH

    トラックバック by Manabu Itoh(ガク) — 2009/12/20 日曜日 @ 21:37:33

  2. 画像無しでリッチな表現(3/4) – css3を触ってみて思った4個の利点 | kzms2 – html,css,javascript http://bit.ly/6cuOUj

    トラックバック by ずま/Zuma — 2009/12/21 月曜日 @ 1:38:51

コメントを入力

コメント欄

Available Feeds

ブログ内検索

Profile

ずま/Zuma
Zuma
TwitterはてなブックマークTumblrFriendFeedGoogle リーダー

某ポータルWebデザイナー。世間的にはマークアップな人。 html,css,javascript大好き。最近はcss3がお気に入り。phpとasも気になるお年頃。僕はどこへ向かうのか。dot3というユニットでも活動中。http://dot3.jp [tag]iPhone,music,design,wordpress

Face book

最近の活動

Dreamweaver Town Meeting in Tokyo

Dreamweaver Town Meeting in Tokyoに出演しました。