[新]CSS3のグラデーション・角丸・影

2013.01.28

IE6のマイクロソフトさんのサポートも終了してから結構経つので、そろそろいいかも。
とはいえhtcファイルでそれらを実現できるようにしてくださっている方々がいらっしゃるので使用させていただきます。
ほんと感謝です。

/* グラデーション */
background: -moz-linear-gradient(top, #FFFFFF, 50%, #FFFFFF, #e2e2e2);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), color-stop(0.5, #FFFFFF), to(#e2e2e2));

/* 角丸 */
border: 1px solid #7d7d7d;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;

/* 影 */
-moz-box-shadow:5px 5px 10px #333;
-webkit-box-shadow:5px 5px 10px #333;
-pie-box-shadow:5px 5px 10px #333;

/* テキストの影 */
text-shadow: 1px 1px 3px #000;

/* IEで適用させるためのhtcファイル */

下記htcファイルを適用するクラスの最下部に記載する

・・・・・・・・・・・・・・・・・・・・・・・
記載例:
.class {
-moz-box-shadow:5px 5px 10px #333;
-webkit-box-shadow:5px 5px 10px #333;
-pie-box-shadow:5px 5px 10px #333;

behavior: url( PIE.htc );
}
・・・・・・・・・・・・・・・・・・・・・・・

/* CSS3 PIE.htc:ただしテキストの影が効かない */
behavior: url( ../pie/PIE.htc );
http://css3pie.com/

/* CSS3 IE.htc:ただしグラデーションが効かない */
behavior: url( ../pie/PIE.htc );
http://fetchak.com/ie-css3/

### 設置する際の注意点 ###
# 設置するCSSではなく読み込むhtmlファイルからの相対パスで指定する。もしくはPIEへの絶対パスで指定する。
# .htaccessに「AddType text/x-component .htc」を記述して拡張子.htcのファイルがテキスト形式のファイルであること宣言する。

コメントは受け付けていません。