Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】repeating-radial-gradientを何気に初めて使ってみる

 どうも!LSSです!!

 

CSSの background-image プロパティに、画像ファイルの代わりに linear-gradient や radial-gradient を使用する事で、綺麗なグラデーションが描ける!

ので、結構多用してきました。

 

  

で。

その他に、
repeating-linear-gradient
repeating-radial-gradient
というのもある、と知ってはいたのですが、
「リピート?背景画像はデフォルトで繰り返し表示で、repeatプロパティで制御できるのに、なぜ別に用意されているんだろう?」
って思っていたんですね。ずっとw

 

これが、実は大きな誤解で、思っていたものと全く違うものだった、という話です。

 

 

普通のradial-gradientとrepeating-radial-gradient

普通の場合。

background-image:
radial-gradient(
circle at 70% 30%
,white,lightblue 20%
);

 

サイズを小さく指定し、普通のものを繰り返した場合
(こうなるものと思っていたパターン)

background-image:
radial-gradient(
circle at 70% 30%
,white,lightblue 20%
);
background-size:50px 50px; 

 

repeating-の場合

background-image:
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%ってとこ)のほうなんですね。

白→水色 と指定していると、白→水色→白→水色→白→水色→白→水色…という風に指定したかのように表示してくれる、と。

 

ただし、水色から元の白に戻る部分はグラデーションせず、クッキリと変わるので、もしそこもグラデーションさせたかったら、

background-image:
repeating-radial-gradient(
circle at 70% 30%
,white,lightblue,white 33%
);

↑こんな風に、「白→水色→白」としておけばOKです^^

 

 

ついでに、失敗例

background-image:
repeating-radial-gradient(
circle at 70% 30%
,white,lightblue
);

lightblue の後に書いていた「20%」を削ると、repeating効果が出なくなってしまいます。

色位置の指定がないと、最大指定となってしまい、繰り返す空きがなくなってしまうという事なんですね。

  

 

分かったところで、どう使うかが最大の問題

背景模様として、例えば、

<div style="
background-image:
repeating-radial-gradient(
circle at 0% 0%,
#eeeeff,#f8f8ff,#eeeeff 10%
);">中に入れる文章</div>

のように薄~い色にしたら、しゃれた模様になったりする…のかな?w

 

repeating-radial-gradient の利点は、「枠が例えどんなに大きくなっても、延々と円を繰り返し大きくしてくれる」ところ。

とすると、もし素敵な配色を思いついたら、ブログの背景画像に適用したりすると、記事が長くなっても、どこまでもバウムクーヘンの層のように描画してくれる、というような使い方ができそうですね。

 

 

 

  

 

 

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

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