柄CSS、可愛い系。

こんばんは、さじです。

これ、もう使いましたか？

 CSSの模様が簡単に作れるように

はてなブロガーのLSSさん（id:little_strange）が作ったツールです。

先日作った模様のCSSで数値計算が大変だったと

愚痴っていたら作ってくださいました。

模様を見ながら直感的に作っていけるので

遊び感覚でCSSの模様のお絵かきができます。

ということで、すぐにやってみました！

まずは、シンプルに雲です。

クラウドの記事とかいいですね。

 

 <div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 11px at 50% 50%,#ffffffff 99%,transparent 0%),radial-gradient(circle 8px at 70% 53%,#ffffffff 99%,transparent 0%),radial-gradient(circle 8px at 65% 50%,#ffffffff 99%,transparent 0%);"> </div>

どんどん行きます。

波。というか、レース編みみたいな波。

夏のプール遊びの記事とかお子様ブログとかね。

 

 <div style="background-color: #cdf0f7; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 3px at 10% 40%,#ffffffff 99%,transparent 0%),radial-gradient(circle 3px at 30% 50%,#ffffffff 99%,transparent 0%),radial-gradient(circle 3px at 50% 56%,#ffffffff 99%,transparent 0%),radial-gradient(circle 3px at 70% 56%,#ffffffff 99%,transparent 0%),radial-gradient(circle 3px at 90% 50%,#ffffffff 99%,transparent 0%);"> </div>

 これは、浴衣柄？うちわ？色変えたら花火とかも。

 

 <div style="background-color: #e9d9ff; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 3px at 50% 32%,#ffffffff 99%,transparent 0%),radial-gradient(circle 3px at 31% 50%,#ffffffff 99%,transparent 0%),radial-gradient(circle 3px at 69% 50%,#ffffffff 99%,transparent 0%),radial-gradient(circle 2px at 50% 52%,#ffffffff 99%,transparent 0%),radial-gradient(circle 3px at 40% 70%,#ffffffff 99%,transparent 0%),radial-gradient(circle 3px at 61% 70%,#ffffffff 99%,transparent 0%);"> </div>

 夏っぽい花。おしろい花みたいなイメージ。

 

 <div style="background-color: white; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 4px at 50% 56%,red 99%,transparent 0%), radial-gradient(circle 8px at 50% 36%,pink 99%,transparent 0%),radial-gradient(circle 8px at 31% 54%,pink 99%,transparent 0%),radial-gradient(circle 8px at 69% 54%,pink 99%,transparent 0%),radial-gradient(circle 8px at 50% 60%,pink 99%,transparent 0%),radial-gradient(circle 8px at 39% 74%,pink 99%,transparent 0%),radial-gradient(circle 8px at 62% 74%,pink 99%,transparent 0%);"> </div>

最後は大作です（自分で言う）。カップケーキ。

 

 <div style="background-color: pink; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 4px at 50% 32%,red 99%,transparent 0%),radial-gradient(circle 4px at 31% 50%,#ffffff 99%,transparent 0%),radial-gradient(circle 4px at 69% 50%,#ffffff 99%,transparent 0%),radial-gradient(circle 4px at 40% 70%,#fff082 99%,transparent 0%),radial-gradient(circle 4px at 50% 70%,#fff082 99%,transparent 0%),radial-gradient(circle 4px at 61% 70%,#fff082 99%,transparent 0%),radial-gradient(circle 11px at 50% 56%,#ffffff 99%,transparent 0%);"> </div>

だんだんと模様というよりも

ドット絵になりました（笑）。

これをいったい何にどうやって使うんだろう。。

使えそうなら自由に使ってくださいませ。

次は、生き物シリーズを作りたいと思ってます。

うん、自己満足CSS。

さじ