CSSメモ

円形グラデーション ページ16

##

グラデーションを円形にすることもできます。
その場合、radial-gradientを使います。

*
linear(リニアー)は、「直線の」
radial(ラジアル)は、「放射状の」
という意味があります。

円になるので、さらに設定が複雑で、難しくなります。
例として、真ん中が白、外側が赤のグラデーションを用意しました。
{
background:radial-gradient(ellipse closest-side at center,#fff,#f00);
}
１つずつ説明していきます。

・ellipseのところ
グラデーションの形を決めます。
設定できるのは、ellipse(だ円)と、circle(真円、完全の丸い円)の２つで、何も書かない場合はellipseになります。

・closest-sideのところ
グラデーションのサイズ、つまりグラデーションの終わるところを決めます。
以下の4つから選びます。
closest-side : 最も近い辺がグラデーションの終了位置となる
farthest-side : 最も遠い辺がグラデーションの終了位置となる
closest-corner : 最も近い角がグラデーションの終了位置となる
farthest-corner : 最も遠い角がグラデーションの終了位置となる
何も設定しないと、一番下のfarthest-cornerになります。

・at centerのところ
グラデーションの始まる位置を決めます。
画像などと同じになります。
at top left にすると、左上からグラデーションが始まります。
何も書かなければ、at centerで真ん中からスタートします。

・#fff、#f00のところ
色の設定です。
１つ目が、始まりの色で、例だとat center(真ん中)の色になり、２つ目が終わりの色で、例だとはじの色になります。
linear-gradientと同じく、3色以上も設定できます。
また、半角スペースで、どの色をどこまで、ということも設定できます。

円形のグラデーションの画像を用意するのはなかなか難しいので、CSSで設定すると楽ですね。

グラデーションの使い所の話ですが、em7は、主に画像にグラデーションを重ねて使っています。
色が濃い所に半透明の白をグラデーションでかけています。設定を変えれば画像の雰囲気を壊さずに一部分だけ色を薄くする事が出来るので便利です。

##

行間を広げる→←グラデーション応用

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す