cssだけでモクモク雲みたいな装飾

もくもくしたい時にcssのみで作ってみる

上と下に付けるだけ。
保育系とかママ系サイトの装飾に使ってもいいかもしれませんね。

モクモクDEMO

画像でやるとレスポンシブで崩れてしまったり、画質が荒れてしまったり大変。
こういうちょっとした装飾をcssで素早く調整できるようになれば、だいぶ楽になりそう。
ストックとして置いておくのもありかも。
コピペ用にめもめも。

モクモクCSS

　
.kumo.up{
    height: 100px;
    width: 100%;
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 100%, 40, from(#369A7E), color-stop(0.49, #369A7E), color-stop(0.51, #fff), to(white));
    -webkit-background-size: 49px 100%;
}
.kumo.down {
    height: 100px;
    width: 100%;
    background: -webkit-gradient(radial, 50% 0, 10, 50% 0, 40, from(#369A7E), color-stop(0.49, #369A7E), color-stop(0.51, #fff), to(white));
    -webkit-background-size: 49px 100%;
}

モクモクDEMOのHTML

　
<div class="kumo up"></div>
<p>こんなかんじになるよ</p>
<div class="kumo down"></div>