どうも!LSSです!!
CSSの background-image プロパティに、画像ファイルの代わりに linear-gradient や radial-gradient を使用する事で、綺麗なグラデーションが描ける!
ので、結構多用してきました。
で。
その他に、
repeating-linear-gradient
repeating-radial-gradient
というのもある、と知ってはいたのですが、
「リピート?背景画像はデフォルトで繰り返し表示で、repeatプロパティで制御できるのに、なぜ別に用意されているんだろう?」
って思っていたんですね。ずっとw
これが、実は大きな誤解で、思っていたものと全く違うものだった、という話です。
普通のradial-gradientとrepeating-radial-gradient
普通の場合。
radial-gradient(
circle at 70% 30%
,white,lightblue 20%
);
サイズを小さく指定し、普通のものを繰り返した場合
(こうなるものと思っていたパターン)
radial-gradient(
circle at 70% 30%
,white,lightblue 20%
);
background-size:50px 50px;
repeating-の場合
repeating-radial-gradient(
circle at 70% 30%
,white,lightblue 20%
);
repeating-radial-gradientのコード(グラデーション以外の指定は割愛)
<div style="background-image: repeating-radial-gradient(circle at 70% 30%,white,lightblue 20%);">中に入れる文章</div>
つまり、繰り返されるのは画像じゃなくて
グラデーションの指定、の色変化部分(white,lightblue 20%ってとこ)のほうなんですね。
白→水色 と指定していると、白→水色→白→水色→白→水色→白→水色…という風に指定したかのように表示してくれる、と。
ただし、水色から元の白に戻る部分はグラデーションせず、クッキリと変わるので、もしそこもグラデーションさせたかったら、
repeating-radial-gradient(
circle at 70% 30%
,white,lightblue,white 33%
);
↑こんな風に、「白→水色→白」としておけばOKです^^
ついでに、失敗例
repeating-radial-gradient(
circle at 70% 30%
,white,lightblue
);
lightblue の後に書いていた「20%」を削ると、repeating効果が出なくなってしまいます。
色位置の指定がないと、最大指定となってしまい、繰り返す空きがなくなってしまうという事なんですね。
分かったところで、どう使うかが最大の問題
背景模様として、例えば、
background-image:
repeating-radial-gradient(
circle at 0% 0%,
#eeeeff,#f8f8ff,#eeeeff 10%
);">中に入れる文章</div>
のように薄~い色にしたら、しゃれた模様になったりする…のかな?w
repeating-radial-gradient の利点は、「枠が例えどんなに大きくなっても、延々と円を繰り返し大きくしてくれる」ところ。
とすると、もし素敵な配色を思いついたら、ブログの背景画像に適用したりすると、記事が長くなっても、どこまでもバウムクーヘンの層のように描画してくれる、というような使い方ができそうですね。
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^