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
);
コメント