【CSS】キラキラ背景【小ネタ】

　どうも！LSSです！！

今回はまたCSS小ネタです。

キラキラ背景

こういうキラキラの背景を考えてみました。
もっと色を増やしたり色々試みていたんですが…結局シンプルな方が美しい？

コード

<style>
.kirakira{
width:300px;
height:300px;
background-image:repeating-conic-gradient(from 45deg,#ffffff,#99bbff,#ffffff 180deg);
background-size:40px 40px;
padding:0.6em;
font-size:120%;
font-weight:bold;
}
</style>
<div class="kirakira">こういうキラキラの背景を考えてみました。<br />もっと色を増やしたり色々試みていたんですが…結局シンプルな方が美しい？</div>

赤太字部分は好きな文章に変更してください。

うち、背景デザインに関わる記述は２行

background-image:repeating-conic-gradient(from 45deg,#ffffff,#99bbff,#ffffff 180deg);
background-size:40px 40px;

まず、下の行である、

background-size:40px 40px;

が「繰り返されるひとつの背景画像のサイズ」を指定しています。

幅40px、高さ40pxの四角い枠が繰り返し敷き詰められる事になります。

１行目の、

background-image:repeating-conic-gradient(from 45deg,#ffffff,#99bbff,#ffffff 180deg);

が背景画像を描いている部分で、「repeating-conic-gradient」を使用しています。

from 45deg…開始角度は45度

#ffffff,#99bbff,#ffffff…色は白→青→白の順にグラデーション、

180deg…最後が180degなので、「repeating-」により360度中２回繰り返される、という事になります。

その他の指定について

その他の指定は、全体の枠の大きさやフォントに関する指定です。

width:300px;
height:300px;

幅300px、高さ300px（なので中の40pxの四角は７個半並ぶようなサイズですね）

padding:0.6em;

内側に0.6文字分の余白を設けています。

font-size:120%;
font-weight:bold;

文字サイズを通常の1.2倍、太字にしています。

キラキラシールのようなものを目指したのですが…

昔なつかし（今もコラボやらで色々出てはいますが）ビックリマンシールのレアシール「ヘッド」の背景に使われていたようなキラキラを目指して色々色を変えたりしていたのですが…どうも凝れば凝るほど遠ざかっていきましたｗ

結局、シンプルなほうが綺麗だったりしますが…どうにかやりようはあるんじゃないか？とまだ諦められずにいます^^;

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

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