CSS のグラデーションとは、2 つ以上の色間の滑らかな移行を指します。以前は、グラデーション効果を実現するには、事前定義された画像を使用する必要がありました。CSS3 は、グラデーション効果を実現するための柔軟なソリューションを提供します。
CSS3 では、線形グラデーション (linear-gradient() 関数で作成)、放射状グラデーション (radial-gradient() 関数で作成)、円錐形グラデーション (conic-gradient() で作成) の 3 種類のグラデーションを定義できます。関数作成)。さらに、repeat-linear-gradient()、repeat-radial-gradient()、およびrepeat-conic-gradient()関数を使用して、繰り返しグラデーションを作成できます。
CSS を通じて作成されたグラデーションは、シンプルかつ柔軟であるだけでなく、画像を使用するときに必要な読み込みプロセスを排除することで、Web ページの読み込み時間を節約します。さらに、CSS で作成されたグラデーション要素は、品質を損なうことなく、任意のスケールで拡大または縮小できます。
1. 線形勾配 Linear-gradient()
線形グラデーションとは、直線 (右上から下、左から右など) に沿ったカラー グラデーションを指します。線形グラデーションを作成するには、少なくとも 2 つのカラー ストップを定義する必要があります (カラー ストップは、スムーズに移行したい色)、より複雑なグラデーション効果を作成するには、より多くのカラーストップを定義する必要があります。線形グラデーションを作成するための基本的な構文は次のとおりです。
線形グラデーション(方向,カラーストップ1,カラーストップ2,...);
パラメータの説明は次のとおりです。
direct は、グラデーションの方向 (たとえば、左から右、上から下) を定義するオプションの値です。特定の角度 (たとえば、90 度) にすることも、left などのキーワードを追加することもできます。 、右、上、下などでグラデーションの方向を示します。例:
● 左へ: 右から左を意味し、270 度に相当します。
● 右へ: 左から右を意味し、90 度に相当します。
● 上へ: 下から上を意味し、0 度に相当します。
● tobottom: デフォルト値。上から下を示し、180 度に相当します。
● 右下へ: 左上から右下を意味します。
● 右上へ: 左下から右上へを意味します。
● 左下へ: 右上から左下へという意味です。
● 左上へ：右下から左上を意味します。
color-stop1、color-stop2、...: 複数の定義されたカラー スケールを示します。各カラー スケールで色を定義することに加えて、単位または単位に値を追加することによって色の開始位置と終了位置を定義することもできます。割合。
[例] Linear-gradient() 関数を使用して線形グラデーションを定義します。
<!DOCTYPEhtml><html><head><style>div{width:210px;height:50px;float:left;margin:10px;}.one{background:linear-gradient(torightbottom,red,blue70px);}。 two{background:linear-gradient(190deg,#000,#FFF);}.three{background:linear-gradient ient(red,green,blue);}.four{background:linear-gradient(toright,red,orange, yellow,green,blue,indigo,violet);}</style></head><body><divclass =one></div><divclass=two></div><divclass=three></div><divclass=4></div></body></html>実行結果:
2. 放射状グラデーションradial-gradient();
放射状グラデーションと線形グラデーションの違いは、放射状グラデーションは中心点の位置を指定して、グラデーションの形状を設定できることです。放射状グラデーションを定義するための基本的な構文は次のとおりです。
放射状グラデーション(位置の形状サイズ,カラーストップ1,カラーストップ2,...);
パラメータの説明は次のとおりです。
(1) at: パラメータ位置の前に配置する必要があるキーワード。
(2) 位置: グラデーションの開始点の座標を指定します。数値と単位、パーセント、またはキーワード (左、下など) を使用して、グラデーションの開始点の座標を指定できます。 ) 2 つのパラメータが指定された場合、最初のパラメータは横座標を表すために使用され、2 番目のパラメータは縦軸を表すために使用されます。パラメータが 1 つだけ指定された場合、2 番目のパラメータはデフォルトで 50% に設定されます。中心;
(3) 形状: グラデーションの形状を指定します。オプションの値は円 (circle) と楕円 (ellipse) です。
(4) サイズ: グラデーション形状のサイズを指定するには、円と楕円の半径を特定の数値で指定する以外に、以下に示すキーワードを使用して指定することもできます。
●最近接側: 円の中心から円の中心に最も近い側までの放射状グラデーションの半径の長さを指定します。
●closest-corner: 円の中心から円の中心に最も近い角までの放射状グラデーションの半径の長さを指定します。
●farthest-side: デフォルト値。円の中心から円の中心から最も遠い側までの放射状グラデーションの半径の長さを指定します。
●farthest-corner：円の中心から円の中心から最も遠い角までの放射状グラデーションの半径の長さを指定します。
(5) color-stop1, color-stop2,...: 定義された複数のカラースケールを示します。カラースケールごとに色を定義するほか、色の開始位置と終了位置を数値で定義することもできます。プラス単位またはパーセンテージ。
[例] 放射状グラデーションを定義するには、radial-gradient() 関数を使用します。
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{background:radial- gradient(circleat50%,red, yellow,lime);}.two{background:radial-gradient(ellipse100px30pxat30%,red, yellow,lime);}.three{background:r adial-gradient(circle100pxat50%,red10%, yellow50%,lime100px);}.four{background:radial-gradient(circleclosest-cornerat50px30px,red,y ellow,lime);}</style></head><body><divclass=one></div><divclass=two></div><divclass=three></div><divclass=four>< /div></body></html>実行結果:
3. 円錐グラデーション conic-gradient();
円錐形グラデーションは放射状グラデーションに似ています。どちらもカラー スケールのソース ポイントとして中心点を持ちます。違いは、円錐形グラデーションが (中心点から放射状に広がるのではなく) 中心点を中心に回転することです。円錐形のグラデーションの定義は次のようになります。
conic-gradient(fromangleatposition,start-color,...,last-color);
構文は次のように説明されます。
(1) from: パラメータ angle の前に配置する必要があるキーワード。
(2) angle: 円錐グラデーションの開始角度を定義します。空にすることもできます。デフォルト値は 0deg です。
(3) at: パラメータ位置の前に配置する必要があるキーワード。
(4) 位置: 円錐グラデーションの円錐の中心の座標を定義します。値と単位、パーセント、またはキーワード (左、下など) を使用して、円錐の中心の座標を指定できます。が指定されている場合、最初のパラメータは横座標を表すために使用され、2 番目のパラメータは縦座標を表すために使用されます。パラメータが 1 つだけ指定された場合、2 番目のパラメータはデフォルトで 50% (中央) に設定されます。
(5) start-color, ..., last-color: 複数の定義されたカラー スケールを示します。各カラー スケールで色を定義することに加えて、色の開始位置をパーセンテージまたは角度で定義することもできます。
[例] conic-gradient() を使用して円錐のグラデーションを定義します。
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{background:conic-gradient(at50%,red,オレンジ、黄、緑、青、藍、紫、赤);}.two{backgラウンド:円錐グラデーション(赤0度30度、オレンジ30度50度、黄50度200度、緑200度300度、青300度360度) g);}.three{background:conic-gradient(from90deg,red0%55%, yellow55%90%,lime90%100%);}.four{/*ターン。円は合計 1 ターンになります 90deg=100grad=0.25turn≈1.570796326794897rad*/background:conic-gradient(#fff0.25turn,#0000.25turn0.5turn,#fff0.5turn0.75turn,# 0000.75turn);}</style></head><body><divclass=one></div><divclass=two></div><divclass=three></div><divclass=four></ div></body></html>実行結果:
4. グラデーションの繰り返しrepeat-linear-gradient()
CSS では、repeat-linear-gradient()、repeat-radial-gradient()、repeat-conic-gradient() などの関数を使用して、それぞれ線形グラデーション、放射状グラデーション、円錐形グラデーションの繰り返しグラデーションを作成することもできます。いわゆる反復グラデーションとは、要素全体をカバーするためにグラデーション プロセスを複数回繰り返すことを意味します。
ヒント:repeat-linear-gradient()、repeat-radial-gradient()、およびrepeat-conic-gradient()関数の構文は、linear-gradient()、radial-gradient()の構文と同じです。 、および conic-gradient() はそれぞれ同じように機能します。
[例] 繰り返しグラデーションを定義するには、repeat-linear-gradient()、repeat-radial-gradient()、reating-conic-gradient() の 3 つの関数を使用します。
<!DOCTYPEhtml><html><head><style>div{width:210px;height:100px;float:left;margin:10px;border:1pxsolidblack;}.one{background:repeat-linear-gradien t(190度,#0000px10px,#FFF10px20px);}.two{背景:繰り返し放射状グラデーション(circle100pxat50%,red0%10%, yellow10%30%,lime30%40%);}.three{背景:repeat-conic-gradient(#69f036deg,#fd44ff36deg72deg);}.four{background:conic-gradient(#fff0.25turn,#0000.25turn0.5turn,#fff0.5turn0.75turn,#0000 .75turn)topleft/25%25%repeat;}</style></head><body><divclass=one></div><divclass=two></div><divclass=three></div> <divclass=four></div></body></html>実行結果:
