線形勾配

勾配

　　グラデーションは、2色以上の段階的な変化で構成されます。これは、線形グラデーションと放射状グラデーションに分けられる特殊なタイプの画像です。これら2つのタイプのグラデーションも、1つに分けられ、繰り返されます。従来のイメージと比較して、グラデーションイメージには、バイト数が少なく、追加のサーバーリクエストを回避でき、デバッグコストが低いという利点があります。平時には、想像力とグラデーションを使用して、多くの素晴らしい視覚効果を作成します。

1つ、線形グラデーション

　　線形グラデーションでは、linear-gradient（）関数を使用して、特定の側面または角度からグラデーション線に沿ってグラデーションの背景を描画します。背景のデフォルトの方向は、次の図に示すように、要素の上から下です。

div { 
  background：linear-gradient（＃FC0、＃F60）; 
}

1）グラデーションライン

　　グラデーションラインは、要素の中心点を通過し、下図に示すように、時計回りに50°回転します。グラデーション線の始点は、要素の最も近い頂点とグラデーション線の垂直線の交点であり、終点は、要素の最も遠い頂点とグラデーション線の垂直線の交点です。垂直線とグラデーション線は同じ四分円にある必要があります。象限は、平面直交座標系の水平軸と垂直軸で分割された4つの領域を指します。

　　この図で、0％と100％はそれぞれ最初と最後のカラースケールの位置を示し、パーセンテージはグラデーションラインの長さを示します。次の図に示すように、グラデーションラインの各ポイントの色は、垂直線に沿って外側に伸びます。

2）方向

　　グラデーション線の方向は、キーワードtoと組み合わせて4辺（上、下、左、右）に延長できます。デフォルトは下です。次のスタイルは右のグラデーションに変更されます。効果は以下のとおりです。

div { 
  background：linear-gradient（to right、＃FC0、＃F60）; 
}

　　4辺のキーワードをペアで組み合わせ、toと組み合わせて角度を宣言します。たとえば、右上は右上の象限を意味します。右上隅ではないことに注意してください。つまり、グラデーションラインは要素の2つの対角頂点を通過しません。下の図に示すように、右上へのグラデーション線は点線ではなく、矢印付きの実線です。

　　キーワードを使用するだけでなく、角度をdeg単位で指定することもできます。これにより、次のコードに示すように、勾配線の方向をより直感的に変更できます（30degなど）。宣言にはキーワードtoは必要ありません。

div { 
  background：linear-gradient（30deg、＃FC0、＃F60）; 
}

3）カラーコード

　　方向を指定すると、コンマで区切られた一連のカラーマーク、つまり色が変化する位置が続きます。たとえば、以下に示すように、＃FC0をグラデーションラインの20％に配置します。

div { 
  background：linear-gradient（30deg、＃FC0 20％、＃F60）; 
}

　　2つのカラーパッチを同じ位置に配置すると、次のコードに示すように、突然の変化効果（一般的にはストライプを実現するために使用されます）を生成できます。下の画像では、左側がグラデーション画像で、右側が鮮明な画像です。

div { 
  background：linear-gradient（30deg、＃FC0 20％、＃F60 20％）; 
}

　　グラデーションサイズを明示的に0に設定すると、急激な変化の効果も得られます。スタイルは次のとおりです。

div { 
  background：linear-gradient（30deg、＃FC0 20％、＃F60 0）; 
}

4）中色点

　　中間色ポイントの役割は、両側の描画モードを変更することです。つまり、隣接する色の間のグラデーションがどのように進むかを定義します。デフォルトでは、中間色点は2つの色の終了位置の間の中間点にあります。

　　例として次のスタイルを考えてみましょう。20％の黄色（＃FC0）から100％のオレンジ（＃F60）への遷移で、2つの中点は60％です。

div { 
  background：linear-gradient（30deg、＃FC0 20％、＃F60）; 
}

　　中間色ポイントを指定するときは、色を省略する必要があります。次のコードに示すように、中間色ポイントを40％に移動します。グラデーション効果は、下の図の右側に表示されます。左側がデフォルトのグラデーションです。

div { 
  background：linear-gradient（30deg、＃FC0 20％、40％、＃F60）; 
}

第二に、放射状勾配

 　　放射状グラデーションは、原点から外に向かって放射され、カバレッジエリアは円形または楕円形のいずれかになります。これは、スポットライト、水面の波紋、およびその他の効果によく使用されます。放射状グラデーションを実装する場合、radial-gradient（）関数が使用され、形状、サイズ、中心点、カラースケールなどのパラメーターを宣言できます。

1）形状とサイズ

　　以下に示すように、2つのキーワードの円または楕円を使用して、グラデーション形状を明示的に宣言できます。

.circle { 
  background：radius-gradient（circle、＃FC0、＃F60）; 
} 
.ellipse { 
  background：radius -gradient（ellipse、＃FC0、＃F60）; 
}

　　次の2つのスタイルでは、半径が宣言されると、円形のグラデーションが生成されます。効果は下の図の左側にあります。2つの異なる半径が宣言されると、楕円のグラデーションが生成されます。効果は下の図の右側にあります。

.circle { 
  background：radius-gradient（20px、＃FC0、＃F60）; 
} 
.ellipse { 
  background：radius -gradient（50px 20px、＃FC0、＃F60）; 
}

　　円の半径はパーセンテージとして設定できず、楕円は設定できることに注意してください。以下に示すように、楕円の最初のパーセンテージ半径は水平軸（背景画像の幅）を指し、2番目の半径は垂直軸（背景画像の高さ）を指します。

div { 
  background：radius-gradient（25％20％、＃FC0、＃F60）; 
}

　　次の表に示すように、グラデーションサイズを長さと割合で指定することに加えて、4つのキーワードもサポートされています。ここで、最も遠い角が放射状グラデーションのデフォルト値です。

キーワード	効果
最も近い側	円の場合、グラデーションエッジは、グラデーション画像の中心点に最も近いエッジまで伸びます。楕円の場合、グラデーションエッジは、グラデーション画像の中心点に最も近い水平軸および垂直軸まで伸びます。
最も遠い側	グラデーションエッジは、円の場合、グラデーションイメージの中心点から最も遠いエッジまで伸びます。楕円の場合、グラデーションエッジは、グラデーションイメージの中心点から最も遠い水平軸および垂直軸まで伸びます。
最も近いコーナー	グラデーションエッジは、グラデーション画像の中心点に最も近い角に接しています
最も遠いコーナー	グラデーションエッジは、中心点から最も遠いグラデーション画像の角に接しています

　　下の図では、円と楕円に4つのキーワードが適用され、中心点の座標が変更されて見やすくなっています。

2）中心点

　　グラデーション領域の中心点は、右上、30px 50pxなどのbackground-position属性の位置値に設定できますが、グラデーションのサイズ値を区別するために、以下に示すように、atで区切る必要があります。

div { 
  background：radius-gradient（30px 50pxの円、＃FC0、＃F60）; 
}

3）グラデーション光線

　　線形グラデーションとは異なり、放射状グラデーションのグラデーション光線は、次の図に示すように、中心点から外側に無数の線を延長します。グラデーションが円の場合、グラデーション光線の終点と中心点の間の距離は円の半径です。グラデーションが楕円の場合、グラデーション光線の終点と中心点の間の距離は楕円の横軸によって決まります。

3、グラデーションを繰り返す

　　線形グラデーションと放射状グラデーションの両方に対応する繰り返し関数があります。前者はrepeating-linear-gradient（）で、後者はrepeating-radial-gradient（）です。繰り返し回数は、background-size属性と要素のサイズによって決まります。下の図では、2つのグラデーションセットがあります（スタイルは次のとおりです）。各グループの左側はグラデーションの効果で、右側はグラデーションの繰り返しの効果です。

.linear { 
  background：linear-gradient（30deg、＃FC0、＃F60 30px）; 
} 
.repeating-linear { 
  background：repeating-linear-gradient（30deg、＃FC0、＃F60 30px）; 
} 
.radial { 
  background：radius -gradient（30px、＃FC0、＃F60）; 
} 
.repeating-radial { 
  background：repeating-radial-gradient（30px、＃FC0、＃F60）; 
}

　　縞模様の背景を生成するなど、グラデーションの繰り返しの独創的な使用法は数多くあります。スタイルは次のとおりです。効果を次の図に示します。

.stripe { 
  background：repeating-linear-gradient（30deg、transparent、transparent 10px、＃F60 0、＃F60 20px）; 
}

 

　　グラデーションは、2色以上の段階的な変化で構成されます。これは、線形グラデーションと放射状グラデーションに分けられる特殊なタイプの画像です。これら2つのタイプのグラデーションも、1つに分けられ、繰り返されます。従来のイメージと比較して、グラデーションイメージには、バイト数が少なく、追加のサーバーリクエストを回避でき、デバッグコストが低いという利点があります。平時には、想像力とグラデーションを使用して、多くの素晴らしい視覚効果を作成します。

1つ、線形グラデーション

　　線形グラデーションでは、linear-gradient（）関数を使用して、特定の側面または角度からグラデーション線に沿ってグラデーションの背景を描画します。背景のデフォルトの方向は、次の図に示すように、要素の上から下です。

div { 
  background：linear-gradient（＃FC0、＃F60）; 
}

1）グラデーションライン

　　グラデーションラインは、要素の中心点を通過し、下図に示すように、時計回りに50°回転します。グラデーション線の始点は、要素の最も近い頂点とグラデーション線の垂直線の交点であり、終点は、要素の最も遠い頂点とグラデーション線の垂直線の交点です。垂直線とグラデーション線は同じ四分円にある必要があります。象限は、平面直交座標系の水平軸と垂直軸で分割された4つの領域を指します。

　　この図で、0％と100％はそれぞれ最初と最後のカラースケールの位置を示し、パーセンテージはグラデーションラインの長さを示します。次の図に示すように、グラデーションラインの各ポイントの色は、垂直線に沿って外側に伸びます。

2）方向

　　グラデーション線の方向は、キーワードtoと組み合わせて4辺（上、下、左、右）に延長できます。デフォルトは下です。次のスタイルは右のグラデーションに変更されます。効果は以下のとおりです。

div { 
  background：linear-gradient（to right、＃FC0、＃F60）; 
}

　　4辺のキーワードをペアで組み合わせ、toと組み合わせて角度を宣言します。たとえば、右上は右上の象限を意味します。右上隅ではないことに注意してください。つまり、グラデーションラインは要素の2つの対角頂点を通過しません。下の図に示すように、右上へのグラデーション線は点線ではなく、矢印付きの実線です。

　　キーワードを使用するだけでなく、角度をdeg単位で指定することもできます。これにより、次のコードに示すように、勾配線の方向をより直感的に変更できます（30degなど）。宣言にはキーワードtoは必要ありません。

div { 
  background：linear-gradient（30deg、＃FC0、＃F60）; 
}

3）カラーコード

　　方向を指定すると、コンマで区切られた一連のカラーマーク、つまり色が変化する位置が続きます。たとえば、以下に示すように、＃FC0をグラデーションラインの20％に配置します。

div { 
  background：linear-gradient（30deg、＃FC0 20％、＃F60）; 
}

　　2つのカラーパッチを同じ位置に配置すると、次のコードに示すように、突然の変化効果（一般的にはストライプを実現するために使用されます）を生成できます。下の画像では、左側がグラデーション画像で、右側が鮮明な画像です。

div { 
  background：linear-gradient（30deg、＃FC0 20％、＃F60 20％）; 
}

　　グラデーションサイズを明示的に0に設定すると、急激な変化の効果も得られます。スタイルは次のとおりです。

div { 
  background：linear-gradient（30deg、＃FC0 20％、＃F60 0）; 
}

4）中色点

　　中間色ポイントの役割は、両側の描画モードを変更することです。つまり、隣接する色の間のグラデーションがどのように進むかを定義します。デフォルトでは、中間色点は2つの色の終了位置の間の中間点にあります。

　　例として次のスタイルを考えてみましょう。20％の黄色（＃FC0）から100％のオレンジ（＃F60）への遷移で、2つの中点は60％です。

div { 
  background：linear-gradient（30deg、＃FC0 20％、＃F60）; 
}

　　中間色ポイントを指定するときは、色を省略する必要があります。次のコードに示すように、中間色ポイントを40％に移動します。グラデーション効果は、下の図の右側に表示されます。左側がデフォルトのグラデーションです。

div { 
  background：linear-gradient（30deg、＃FC0 20％、40％、＃F60）; 
}

第二に、放射状勾配

 　　放射状グラデーションは、原点から外に向かって放射され、カバレッジエリアは円形または楕円形のいずれかになります。これは、スポットライト、水面の波紋、およびその他の効果によく使用されます。放射状グラデーションを実装する場合、radial-gradient（）関数が使用され、形状、サイズ、中心点、カラースケールなどのパラメーターを宣言できます。

1）形状とサイズ

　　以下に示すように、2つのキーワードの円または楕円を使用して、グラデーション形状を明示的に宣言できます。

.circle { 
  background：radius-gradient（circle、＃FC0、＃F60）; 
} 
.ellipse { 
  background：radius -gradient（ellipse、＃FC0、＃F60）; 
}

　　次の2つのスタイルでは、半径が宣言されると、円形のグラデーションが生成されます。効果は下の図の左側にあります。2つの異なる半径が宣言されると、楕円のグラデーションが生成されます。効果は下の図の右側にあります。

.circle { 
  background：radius-gradient（20px、＃FC0、＃F60）; 
} 
.ellipse { 
  background：radius -gradient（50px 20px、＃FC0、＃F60）; 
}

　　円の半径はパーセンテージとして設定できず、楕円は設定できることに注意してください。以下に示すように、楕円の最初のパーセンテージ半径は水平軸（背景画像の幅）を指し、2番目の半径は垂直軸（背景画像の高さ）を指します。

div { 
  background：radius-gradient（25％20％、＃FC0、＃F60）; 
}

　　次の表に示すように、グラデーションサイズを長さと割合で指定することに加えて、4つのキーワードもサポートされています。ここで、最も遠い角が放射状グラデーションのデフォルト値です。

キーワード	効果
最も近い側	円の場合、グラデーションエッジは、グラデーション画像の中心点に最も近いエッジまで伸びます。楕円の場合、グラデーションエッジは、グラデーション画像の中心点に最も近い水平軸および垂直軸まで伸びます。
最も遠い側	グラデーションエッジは、円の場合、グラデーションイメージの中心点から最も遠いエッジまで伸びます。楕円の場合、グラデーションエッジは、グラデーションイメージの中心点から最も遠い水平軸および垂直軸まで伸びます。
最も近いコーナー	グラデーションエッジは、グラデーション画像の中心点に最も近い角に接しています
最も遠いコーナー	グラデーションエッジは、中心点から最も遠いグラデーション画像の角に接しています

　　下の図では、円と楕円に4つのキーワードが適用され、中心点の座標が変更されて見やすくなっています。

2）中心点

　　グラデーション領域の中心点は、右上、30px 50pxなどのbackground-position属性の位置値に設定できますが、グラデーションのサイズ値を区別するために、以下に示すように、atで区切る必要があります。

div { 
  background：radius-gradient（30px 50pxの円、＃FC0、＃F60）; 
}

3）グラデーション光線

　　線形グラデーションとは異なり、放射状グラデーションのグラデーション光線は、次の図に示すように、中心点から外側に無数の線を延長します。グラデーションが円の場合、グラデーション光線の終点と中心点の間の距離は円の半径です。グラデーションが楕円の場合、グラデーション光線の終点と中心点の間の距離は楕円の横軸によって決まります。

3、グラデーションを繰り返す

　　線形グラデーションと放射状グラデーションの両方に対応する繰り返し関数があります。前者はrepeating-linear-gradient（）で、後者はrepeating-radial-gradient（）です。繰り返し回数は、background-size属性と要素のサイズによって決まります。下の図では、2つのグラデーションセットがあります（スタイルは次のとおりです）。各グループの左側はグラデーションの効果で、右側はグラデーションの繰り返しの効果です。

.linear { 
  background：linear-gradient（30deg、＃FC0、＃F60 30px）; 
} 
.repeating-linear { 
  background：repeating-linear-gradient（30deg、＃FC0、＃F60 30px）; 
} 
.radial { 
  background：radius -gradient（30px、＃FC0、＃F60）; 
} 
.repeating-radial { 
  background：repeating-radial-gradient（30px、＃FC0、＃F60）; 
}

　　縞模様の背景を生成するなど、グラデーションの繰り返しの独創的な使用法は数多くあります。スタイルは次のとおりです。効果を次の図に示します。

.stripe { 
  background：repeating-linear-gradient（30deg、transparent、transparent 10px、＃F60 0、＃F60 20px）; 
}