1. >
  2. >
  3. cssだけでモクモク雲みたいな装飾

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>

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る