Little Strange Software

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

【CSS】CSSで「こいのぼり」を描いてみました

 どうも!LSSです!!

 

5月5日「こどもの日」でしたね!

もう、その日も終わろうという頃になって、何かそれっぽい事をこなしたくなりましたw

 

気の抜けた「こいのぼり」

 

 

 

コード

<style>
.koinobori{
width:300px;
height:450px;
background:
radial-gradient(15px 40px at 40px 50px,#ffffff 90%,#000000 99%,#00000000 100%)
,conic-gradient(from 200deg at 250px 420px,#ff0000 70deg,#ff000000 71deg) 40px -408px
,conic-gradient(from 200deg at 250px 420px,#ffff00 70deg,#ffff0000 71deg) 40px -380px
,conic-gradient(from 200deg at 250px 430px,#0000ff 70deg,#0000ff00 71deg) 40px -360px

,radial-gradient(20px 20px at 90px 140px,#000000 30%,#ffffff 31% 95%,#000000 96% 99%,#00000000 100%)
,radial-gradient(15px 40px at 40px 150px,#ffffff 90%,#000000 99%,#00000000 100%)
,conic-gradient(at 100px 80px,#000000 90deg,#00000000 91deg) -60px 110px
,radial-gradient(15px 40px at 240px 150px,#000000 99%,#00000000 100%)

,radial-gradient(20px 20px at 90px 240px,#000000 30%,#ffffff 31% 95%,#000000 96% 99%,#00000000 100%)
,radial-gradient(15px 40px at 40px 250px,#ffffff 90%,#000000 99%,#00000000 100%)
,conic-gradient(at 100px 80px,#ff0000 90deg,#ff000000 91deg) -60px 210px
,radial-gradient(15px 40px at 240px 250px,#ff0000 99%,#ff000000 100%)

,radial-gradient(20px 20px at 90px 340px,#000000 30%,#ffffff 31% 95%,#000000 96% 99%,#00000000 100%)
,radial-gradient(15px 40px at 40px 350px,#ffffff 90%,#000000 99%,#00000000 100%)
,conic-gradient(at 130px 80px,#0000ff 90deg,#0000ff00 91deg) -90px 310px
,radial-gradient(15px 40px at 210px 350px,#0000ff 99%,#0000ff00 100%)

,linear-gradient(#8888ff,#ffffff);
}
</style>
<div class="koinobori"> </div>

 

 

あとがき

はい、「radial-gradient」と「conic-gradient」をたくさん重ね合わせただけの「こいのぼり」でした。

一尾あたり4つ、上から「目」「口」「胴」「尾」に該当します。

 

…絵としてはあまりにも…単純に記号化された感じですねw

 

 

 

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

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