CSSグラデーションカラー効果の実装方法と効果デモ_html/css_WEB-ITnose

CSS グラデーションも同様のテクニックです。現在、Firefox、Google Chrome、Safari、IE8+ はすべてこのテクノロジーをサポートしており、Web サイトで安全に使用できるようになりました。基本的な構文、ブラウザのサポート、CSS グラデーション テクノロジの欠点を見てみましょう。

デモを見る

CSS グラデーションの用語と説明

CSS グラデーションを使用すると、カラー グラデーションを使用できます エフェクトで空間を変更します - 1 つの色からの移行別の空間に移動します。グラデーション カラーには、線形 (線形グラデーション) と放射状 (円形グラデーション) の 2 つの形式があります。 CSS グラデーション カラー (Gradients) テクノロジが視覚的なパターン効果を生み出すことは明らかであり、この視覚効果を実現するのは非常に簡単で、簡単なプログラミングで実現できます。 CSS グラデーションは CSS3 の非常に早い段階で導入されましたが、このテクノロジーの普及には長い時間がかかりました。

CSS カラー線形グラデーションの構文

CSS カラー線形グラデーションの構文はブラウザによって若干異なりますが、最終的には統一され標準です:

background-image: linear-gradient(<point> || <angle>,]? <stop>, <stop> [, <stop>]*)

最初のパラメータは、グラデーションの開始点または角度です。 2 番目のパラメータはカラーストップです。少なくとも 2 つの色 (開始点と終了点) が必要です。任意の色を追加して、色のグラデーションを豊かにすることができます。カラー停止点の定義は、色、または色とパーセンテージの組み合わせです。

/*  color-stop(percentage/amount, color) */color-stop(0.20, red)

CSS グラデーション カラー (Gradients) テクノロジーは CSS3 の比較的新しいテクノロジーであり、高度な CSS 機能であるためです。 , したがって、各ブラウザは、このテクノロジーの実装に独自の機能のいくつかを追加します。たとえば、WebKIt をレンダリング エンジンとして使用する Google Chrome は、そのための複数の構文を実装しています。次のコードには、基本的にトップダウンのカラー グラデーションのすべてのケースが含まれています。

#example1	{	/* 底色 */	background-color: #063053;	/* chrome 2+, safari 4+; multiple color stops */	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));	/* chrome 10+, safari 5.1+ */	background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);	/* firefox; multiple color stops */	background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);	/* ie 6+ */	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');	/* ie8 + */	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";	/* ie10 */	background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);	/* opera 11.1 */	background-image: -o-linear-gradient(#063053, #395873, #5c7c99);	/* 标准写法 */	background-image: linear-gradient(#063053, #395873, #5c7c99);}

最初に背景色を設定していることに注意してください。この色は、ユーザーが使用しているブラウザが CSS グラデーション テクノロジをサポートしていない場合に使用されます。 CSS グラデーション テクノロジーは、上下または左右の真っ直ぐだけでなく、角度を伴うグラデーションの方向もサポートします。次の構文でそれを行うことができます:

#example2	{	/* fallback */	background-color:#063053;	/* chrome 2+, safari 4+; multiple color stops */	background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));	/* chrome 10+, safari 5.1+ */	background-image:-webkit-linear-gradient(45deg, #063053, #395873, #5c7c99);	/* firefox; multiple color stops */	background-image:-moz-linear-gradient(45deg, #063053, #395873, #5c7c99);	/* ie10 */	background-image: -ms-linear-gradient(45deg, #063053 0%, #395873 100%);	/* opera 11.1 */	background-image: -o-linear-gradient(45deg, #063053, #395873);	/* The "standard" */	background-image: linear-gradient(45deg, #063053, #395873);}

もっと複雑にすることもできます…カラフルな CSS カラー グラデーション?虹を作ってみましょう:

/* example 3 - linear rainbow */#example3	{	/* fallback */	background-color:#063053;	/* chrome 2+, safari 4+; multiple color stops */	background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));	/* chrome 10+, safari 5.1+ */	background-image:-webkit-linear-gradient(red, green, blue, purple, orange);	/* firefox; multiple color stops */	background-image:-moz-linear-gradient(top, red, green, blue, purple, orange);	/* ie10 */	background-image: -ms-linear-gradient(red, green, blue, purple, orange);	/* opera 11.1 */	background-image: -o-linear-gradient(red, green, blue, purple, orange);	/* The "standard" */	background-image: linear-gradient(red, green, blue, purple, orange);}

CSS カラー グラデーション テクノロジに対する IE のサポートについてのいくつかの説明: 初期の頃、IE はグラデーション カラーを実装するために filter および -ms-filter 構文を使用していました。IE の最新バージョン-ms-linear-gradient 構文に変更されました。 CSS で条件ステートメントを使用すると、この問題を解決できます。

<!--[if lt IE 10]><style>.gradientElement {	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";}</style><![endif]-->

これは理想的ではありませんが、Web サイトのデザインには重要です。

CSS 放射状グラデーション

CSS 放射状グラデーションは、一方向に沿ってグラデーションするのではなく、点が中心で、グラデーションは 360 度すべての側面に放射状に広がります。度。現在、IE を除くすべてのブラウザーは CSS 放射状カラー グラデーション (放射状グラデーション) をサポートしていますが、構文も異なります...WebKit エンジンを搭載したブラウザーは、CSS 放射状カラー グラデーションの構文を完全に変更しました。 (放射状グラデーション)。昔ながらの書き方を見てみましょう:

/* basic */background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red));/* color stops */background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));

そして WebKit (主に Google Chrome に代表される) の新しい構文は Firefox の構文とまったく同じです:

radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]*)

このリングカラーグラデーション構文は、Firefox と Google Chrome で使用される最新の構文です。このグラデーション手法では、グラデーション リングのサイズを設定するために使用できる定数もいくつかあります。

• 最近接側: プロトタイプの場合、グラデーションに最も近い側を指します。展開時にグラフィックが片側に届く必要があります。楕円の場合、水平方向または垂直方向で最も近い辺を指します。

• closest-corner: グラデーション グラフィックが拡散するときに到達する必要がある最も近いコーナーを指します

• farthest-side: 最近接と同様です側にありますが、最端に到達します。

• farthest-corner: グラデーション グラフィックが拡散するときに到達する必要がある最も遠い隅を指します。

• contain: 最近接側と同義です。 .

• カバー: 最端コーナーの同義語

放射状グラデーションの基本的な使用法は次のとおりです:

#example4 {	background-image: -moz-radial-gradient(orange, red);	background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* old */	background-image: -webkit-radial-gradient(orange, red); /* new syntax */	background-image: radial-gradient(orange, red);}

上の例には位置とサイズが設定されておらず、2 つのカラーストップのみが設定されています。実際、以下で作成した虹のように、無数の色を使用できます:

#example5 {	background-image: -moz-radial-gradient(red,green,blue,purple,orange);	background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange)); /* old */	background-image: -webkit-radial-gradient(red, green, blue, purple, orange); /* new syntax */	background-image: radial-gradient(red, green, blue, purple, orange);}

位置情報とより多くの色の停止点を追加して、より複雑な色を実装します:

#example6 {	background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);	background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);	background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);}

上記で使用されている色の書き込みと長さの単位に注意してください。はい、実際には、任意の色の表記や長さの単位を使用できます。

CSS カラー グラデーションに関するヒントとヒント

CSS カラー グラデーション (グラデーション) テクニックは貴重ですが、実装が難しい場合があります。必要なグラデーションがすでに実装されている場合、ブラウザのサポートが問題になる場合があります。 CSS カラー グラデーション (グラデーション) の使用に関するいくつかの提案を次に示します:

• CSS カラー グラデーション (グラデーション) である程度の透明度を示したいですか? rgbaカラーを使用します。

• ブラウザがサポートしていない場合に、誤って色が表示されないことを防ぐために、背景色を下部として使用します。

• 火狐浏览器和谷歌浏览器都支持repeating-linear-gradient 和repeating-radial-gradient，用法是：

  #example7 {	background-image: -moz-repeating-linear-gradient(top left -45deg, green, red 5px, white 5px, #ccc 10px);	background-image: -webkit-repeating-linear-gradient(-45deg, green, red 5px, white 5px, #ccc 10px);}

• 如果你对渐变效果要求很严格，例如图表，动画，我推荐你使用Dojo的GFX程序包，它是创建矢量图的利器。而且对IE的支持也非常好！

CSS颜色渐变底色

老式浏览器，例如IE6，IE8或早期的火狐，并不支持渐变色技术，所以，你最好设置一个缺省的底色，当遇到不支持的浏览器时，background颜色就起到作用了：

/* example 1 - basic */#example1	{	/* fallback */	background-color:#063053;	/* gradients below */}

对于不支持的浏览器的另外一种方法是先用新式浏览器实现这个效果，然后截图，然后使用CSS条件判断来调整输出方式。

观看演示

CSS颜色渐变技术是CSS的一种发展进化的结果，随着现代浏览器技术的越来越成熟，我们能更自信的使用这种技术了。