CSS3で影をつけるはじめの一歩-PIE.htc使ってみた3-

PIE.htcを使ってIE6～8でも影をつけることができます。

behaviorの設定を外部CSSで行うときは、
urlを絶対パス（例：http://coder.blog.uhuru.co.jp/demo/2010/css3_gradation/PIE.htc）で記述してください。

ド派手ピンク

  • 角丸ピンクボタン風
  • 角丸ピンクボックス風影付き
    ボタン風、ボックス風共に10pxの影がついています。

落ち着きブルー

  • 角丸ブルーボタン風
  • 角丸ブルーボックス風
    影の色も変えられます。

元気イエロー

  • 角丸イエローボタン風
  • 角丸イエローボックス風影付き
    背景なしだとおかしい。。。

癒しグリーン

  • 角丸グリーンボタン風
  • 角丸グリーンボックス風影付き
    影の方向も変えられます。

情熱レッド

  • 角丸レッドボタン風
  • 角丸レッドボックス風
    位置とぼかし具合を変えてみました。

大人ブラック

  • 角丸ブラックボタン風
  • 角丸ブラックボックス風
    内側に影。。。insetをつけると内側に影を設定できるのですが、Fxしか内側影にならないみたいです。残念。

まったりブラウン

  • 角丸ブラウンボタン風
  • 角丸ブラウンボックス風
    逆に目立つように大きく。。。う～む。。。

中立グレー

  • 角丸グレーボタン風
  • 「,(カンマ)」区切りで複数指定も可能。
    グレーとピンクの影がついています。
    webkitでは使えないかも？※safari 3.1.2で確認。

元の記事に戻る