CSS3入門道場

グラデーション

radial-gradient

線形のグラデーションの次は、放射線状のグラデーションです。つまり、円形です。まずはシンプルなサンプルから。

真ん中を中心として、whiteからblueへ色が変わる楕円形のグラデーションになりました。キーワードのcircleで丸い円に変更できます。色の前に指定します。初期値は、ellipse(楕円形)です。

円の中心は、background-positionと同じ指定方法を使用し、位置を変更することができます。例えば、左から70%地点、上から20%にする場合、以下のように at に続けて、このように書きます。

広さの指定、closest-corner、closest-side、farthest-corner、farthest-side

円には広さ(グラデーションの終了地点までの距離)を指定することができます。先程のatの前に書いて次のようにします。

まるで星のようになりました。この広さの指定が1つだけの時は、円はcircleとなります。2つ指定した場合は楕円(ellipse)となり、それぞれ、幅、高さの順の指定となります。

広さには、キーワードを指定できます。closest-corner、closest-side、farthest-corner、farthest-sideです。以下の意味になります。

中心点から見て、最も近い(or遠い)、角(or壁面)までの広さとなります。例えば、以下のように記述します。

各表示結果は、以下の画像でご確認下さい。(線などは説明上、筆者が追加したものです)

linear-gradientと同様に、複数の色を設定することもできます。

光が当たった感じのボールも下記のようにできます。

縦長にすれば、風船みたくなりますね。

repeating-radial-gradient

linearの時と同様、リピートすることもできます。以下、サンプルと表示結果です。

目が痛くなりそうですね。

Copyright 2015 CSS3入門道場 All Rights Reserved.