クロスブラウザ対応のCSSによるグラデーションの記述例

クロスブラウザ対応のCSSによるグラデーションの記述例

Cross-Browser CSS Gradient

Web Designer Wallの上記エントリーにて、クロスブラウザに対応したCSSグラデーションの記述がまとめられているので紹介します。

WebKit系ブラウザ

SafariやChromeなどのWebKitベースのブラウザは以下のような記述になります。

background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));

WebKit系ブラウザ

Firefox 3.6+

Firefoxの3.6以降のバージョンでは以下のような記述になります。

background: -moz-linear-gradient(top,  #ccc,  #000);

Firefox 3.6+

Internet Explorer

IEでは以下のような記述になります。

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');

Internet Explorer

動作デモ

以上の3つを全て組み合わせることで、クロスブラウザ対応となります。

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */

実際のデモは「Demo: CSS Gradient Box」にアクセス。

対応しているブラウザならば以下のようなグラデーションがかかったボックスが表示されます。
対応ブラウザでの表示

▼スポンサードリンク

記事URL | Trackback(0) | Comment(1) | CSS
1つ後の記事:スプレーをふきつけたようなエフェクトが描けるPhotoshopブラシ【1ファイル10種類】
1つ前の記事:商用可、Webデザイナー向けのアイコン750種詰め合わせパック
承認待ちコメント
このコメントは管理者の承認待ちです
【2013/11/19 10:39】 | [編集]


















管理者にだけ表示を許可する

トラックバックURL
http://webclipping.blog122.fc2.com/tb.php/60-03007623
この記事にトラックバックする(FC2ブログユーザー)