ゆるっと広告業界

デザイナーのじたばた。

柄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

 

さじ