【CSS】円形グラデーションってこうやるのかぁ

　どうも！LSSです！！

　今回は、CSSで円形グラデーションを、やや迷いながらやってみましたｗ

サンプル

サンプル
です

コード

<style><!--
.marugra{
position:relative;
border-radius:8px;
border:1px solid black;
padding:1em;
width:200px;
background-image:radial-gradient(circle 150px at 65% 35%,#ffffff,#888888);
}
--></style>
<div class="marugra">サンプル<br />です</div>

※円形グラデーションに関する指定は赤字の一行だけです。

※青字は任意のクラス名。好きに名付けてOKです。

解説

background-image:radial-gradient(circle 150px at 65% 35%,#ffffff,#888888);

まず、最初と最後の黄緑の部分は決まり文句で、変更する必要はありません。

形状の指定

circle 150px at 65% 35%,#ffffff,#888888

最初の,（カンマ）までの、

circle 150px at 65% 35%

が、形状を設定している部分になります。

circle 150px at 65% 35%

circle は「円」を示しています。

ここに設定できる単語としてはもう一種類、ellipseというのがあり、ellipseにすると「楕円」を指定した事になります。

次の150pxが「半径」で、この場合150pxの円でグラデーションが完結する事になります。

at 65% 35%

「at」以降は、円の「中心位置の指定」になります。

ひとつめの65%は横位置。大きくすると右寄り、小さくすると左寄りになります。

ふたつめの35%は縦位置。大きくすると下寄り、小さくすると上寄りになります。

（%で指定する以外に、pxでピクセル単位の指定もできます。）

色の指定

circle 150px at 65% 35%,#ffffff,#888888

カンマ以降は色を指定する部分になります。

ひとつめの#ffffffは開始色、ふたつめの#888888は終了色。

#ffffff＝白、#888888＝灰色、なので、この場合
「円の中心部は白で、外側に向かって徐々に灰色になる」
グラデーションという事になります。

おまけ：実は色は２色に限らず、たくさん指定可能

例えばこんな、
謎の色も！

コード（CSS指定部分のみ）

.maruniji{
position:relative;
border-radius:8px;
border:1px solid black;
padding:0.5em;
width:250px;
font-weight:bold;
font-size:28px;
color:white;
text-shadow:1px 1px 0px black;
background-image:radial-gradient(circle 150px at 65% 35%,purple,blue,aqua,green,yellow,orange,red);
}

　色の指定部分を 
purple,blue,aqua,green,yellow,orange,red
と、たくさん並べてみました。

　極端な話、こんな感じの事も出来ます、という例ですｗ

　CSSグラデーション、文字による指定でグラフィカルなものが作れるのっていいですねぇ^^

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^