CSS3での線形カラーグラデーションの実装

この記事では主に、Safari と Chrome の Webkit カーネル、Firefox の Gecko カーネルなど、CSS3 での線形カラー グラデーションの実装方法をいくつか紹介します。必要な方は参考にしてください。

グラデーションを表示するために特別に作成されたものです。イメージによるアプローチは柔軟性が低く、すぐに悪い習慣になってしまう可能性があります。しかし、悲しいことに、この記事を書いている時点ではまだそうしなければならないかもしれませんが、そう長くは続かないことを願っています。 Firefox と Safari/Chrome のおかげで、最小限の労力で強力なグラデーションを実現できるようになりました。この記事では、CSS グラデーションの簡単な実装と、このプロパティが Mozilla ブラウザーと Webkit ブラウザーでどのように異なるかを示します。

Webkit

Mozilla と Webkit は通常、CSS3 プロパティに同じ構文を採用していますが、グラデーションに関しては残念ながら一致しません。 Webkit は、グラデーションをサポートする最初のブラウザ カーネルです。次の構造を使用します。パラメータグループはカンマで区切る必要があることに注意してください。

グラデーションの種類 (線形) グラデーションの開始点の X 軸と Y 軸の座標 (0 0 – または左上)
グラデーションの終了点の X 軸と Y 軸の座標 (0 100% または左) -bottom)

開始色? (from(red) ))

終了色? (to(blue))

Mozilla


Firefox はバージョン 3.6 からのグラデーションのみをサポートしており、Webkit とは少し異なる構文を好みます。

/* 语法，参考自: http://webkit.org/blog/175/introducing-css-gradients/ */
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)   
/* 实际用法... */
background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));

属性の接頭辞にグラデーションの種類 (線形) を入れていることに注意してください

グラデーションはどこから始まりますか? (上 – -45deg などの度を使用することもできます)

何色で始まりますか? (赤)

終了色? (青)

カラーストップ


ある色から別の色への 100% のグラデーションが必要ない場合はどうすればよいですか?ここでカラーストップが活躍します。一般的なデザイン手法は、次のような短く微妙なグラデーションを使用することです:

上部のライトグレーから白への微妙なグラデーションに注目してください

以前は、標準的なアプローチは画像を作成し、それを次のように設定することでした。要素の背景画像。水平方向に並べて表示されます。ただし、CSS3 では、これは小さなケースです。

/* 语法，参考自: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ */
-moz-linear-gradient( [ <point> || <angle>,]? <stop>, <stop> [, <stop>]* )    
/* 实际用法*/
background: -moz-linear-gradient(top, red, blue);

今回は、グラデーションの終了をデフォルトの 100% ではなく 8% にします。コントラストのためにヘッダーにも境界線を使用していることに注意してください。これは非常に一般的に使用されます。

もう 1 色追加したい場合は、次のようにすることができます:

background: white; /* 为较旧的或者不支持的浏览器设置备用属性 */
background: -moz-linear-gradient(top, #dedede, white 8%);     
background: -webkit-gradient(linear, 0 0, 0 8%, from(#dedede), to(white)); border-top: 1px solid white;

-moz バージョンの場合、要素の高さの 20% から赤になるように定義します。

-webkit の場合、color-stop を使用します。これは、開始位置と使用する色という 2 つのパラメーターを取ります。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

美しいドロップダウンナビゲーション効果を実現するための CSS について

CSS を使用して遠近効果を実現する方法

以上がCSS3での線形カラーグラデーションの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。