CSS gradient

HTML&CSS

cssのグラデーションを検証してみました

基本的な設定は以下です

グラデーションの種類

linear(線形)
直線状のグラデーションを描画する

radial(放射)
中心から外に向かってグラデーションを描画する

conic(扇形)
円形グラフなどのように、要素の中心を起点に時計回りに描画する

各々のグラデーションの描画方法を指定

linear-gradient()では、終了位置を指定することで傾きのあるグラデーションを描画できる
deg(度) 要素の上辺中央を0度として、0度~360度を指定
例)90deg 90度の位置に向かって270度の位置から描画
to left キーワードによる指定
      指定された各辺または各コーナーへ対辺、対角から描画 
      to left の場合は左辺に向かって右辺より描画される
turn 円の1週を1として、その間の位置を小数点以下で指定する
      例)0.25turn は90degと同じ

radial-gradient() では、2つのタイプを指定する
ellipse(楕円)要素の縦横比に合わせて楕円、省略時はこちらになる
circle(正円)  要素の縦横比に関わらず正円となる

放射グラデーションは、要素の中心から開始し要素の辺または角が終了位置となる

終了位置の指定

farthest-corner   円の中心から遠い角が終了位置になるように描画される
closest-corner    円の中心から近い角が終了位置になるように描画される
farthest-side    円の中心から遠い辺が終了位置になるように描画される
closest-side     円の中心から近い辺が終了位置になるように描画される

円の中心位置
円の中心位置を指定する方法
at 平行位置, 垂直位置

例)以下は円の種類、グラデーションの終了位置、開始する基点を指定している
これは、すべてを省略した場合と同じ結果になる
ellipse farthest-corner at 50% 50%   

conic-gradient() では、扇形に広がるグラデーションを描画できる

扇形グラデーションは、指定色を時計回りに扇形に描画する

開始位置を扇の角度で指定する
from 45deg 45度の位置から開始する

中心位置は円形グラデーションと同様に、at 50% 50% で指定する

使用する色と、配置する位置情報

色は基本的に色コードなどで指定、開始位置、終了位置を半角空白を開けて指定する

色コード  #000000
RGB egb(128,128,128)
RGBA rgba(128,128,128,0,5)

キーワード  red blue yellwo  等

色の位置は、開始位置と終了位置で指定する
例)red 20% 50%
この場合は、要素の20%の位置から50%の位置までが赤にべた塗りされ。そこから次の色へグラデーションされる

色と次の色のグラデーションは中間地点を基点として混ざることになるが、基点の位置を変えることもできる
例) red , 80% , blue
赤 0%の位置から始まり青100%の位置で混ざり合うグラデーションの基点を要素の80%の位置に指定

各々のグラデーションを実際に検証してみました

background: linear-gradient(
    90deg,
    rgba(131,58,180,1) 20%,
    rgba(253,29,29,1) 40%,
    rgba(252,176,69,1) 100%
    );
background: radial-gradient(
    circle, 
    rgba(1,89,132,1) 35%, 
    rgba(2,0,36,1) 36%, 
    rgba(0,202,255,1) 100%
    );
background: conic-gradient(
    from 20deg,
    red 60deg, 
    yellow 60deg 120deg, 
    green 120deg 180deg,
    cyan 180deg 240deg, 
    blue 240deg 300deg,
    magenta 300deg 360deg
    );

コメント