どうも！LSSです！！
【CSS】水滴【小ネタ】 - Little Strange Software
のコメント欄に様々なアイデアをいただき、ありがとうございます^^
コメント欄で回答させていただいた分もありますが、他にもそれぞれコード修正を行って調整してみたので、記事にしてみました。
以下、コード中でそれぞれクラス名を変えていたり、divタグの中の文言を削ったりしていますが、それ以外の変更点を色付き文字にしています。
画像入り
コード
<style>
.pichonimg{
width:150px;
height:100px;
background:radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%),radial-gradient(at 100% 0%,#00000020,#00000000),url(画像ファイルのURL) 0 0/100% 100%;
border-radius:50%/70% 70% 30% 30%;
box-shadow:-2px 3px 2px 0px #00000040;
display:flex;
align-items:center;
justify-content:center;
user-select:none;
}
.pichonimg:active{
border-radius:60%/70% 70% 30% 30%;
}
</style>
<div class="pichonimg"> </div>
noriko様(id:non704)が早速「画像を入れる」のを試して貼っていただきました^^
より立体的な画像で、素晴らしい見栄えとなっていましたね。
この記事上では、汎用的に大抵の画像を閉じ込めるコードを考えてみました。
画像ファイルのURLの部分を置き換える事で、様々な画像を入れる事ができます^^
色とりどり
してみてね
してみてね
してみてね
してみてね
してみてね
してみてね
してみてね
してみてね
コード
<style>
.pichons{
width:150px;
height:100px;
background:radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%),radial-gradient(at 100% 0%,#00000025,#00000000);
border-radius:50%/70% 70% 30% 30%;
box-shadow:-2px 3px 2px 0px #00000040;
display:inline-flex;
align-items:center;
justify-content:center;
user-select:none;
}
.pichons:active{
border-radius:60%/70% 70% 30% 30%;
}
</style>
<div class="pichons" style="background-color: #ffcccc;">クリック<br />してみてね</div>
<div class="pichons" style="background-color: #ccffcc;">クリック<br />してみてね</div>
<div class="pichons" style="background-color: #ccccff;">クリック<br />してみてね</div>
<div class="pichons" style="background-color: #ffffcc;">クリック<br />してみてね</div>
<div class="pichons" style="background-color: #ffccff;">クリック<br />してみてね</div>
<div class="pichons" style="background-color: #ccffff;">クリック<br />してみてね</div>
<div class="pichons" style="background-color: #ffe8cc;">クリック<br />してみてね</div>
<div class="pichons" style="background-color: #e8ffcc;">クリック<br />してみてね</div>
さじ様(id:conasaji)からいただいたコメントを元に、考えてみました^^
20→25と少しだけ右上からの影を強くしてみた他、flexをinline-flexに変更して横並びになるようにしています。
あとはdivタグを並べて、それぞれに違う色の「background-color」を指定する事で、同じクラス指定で色違いが並ぶ事になります^^
ななほしてんとう
コード
<style>
.pichonten{
width:150px;
height:100px;
background:
radial-gradient(4% 7% at 8% 65%,#ffffff 98%,#ffffff00 100%)
,radial-gradient(18% 35% at 0% 80%,#000000 98%,#00000000 100%)
,radial-gradient(10% 15% at 15% 25%,#000000 98%,#00000000 100%)
,radial-gradient(8% 12% at 30% 75%,#000000 98%,#00000000 100%)
,radial-gradient(10% 15% at 50% 30%,#000000 98%,#00000000 100%)
,radial-gradient(10% 15% at 80% 60%,#000000 98%,#00000000 100%)
,radial-gradient(at 100% 0%,#00000020,#00000000),#ff0000;
border-radius:50%/70% 70% 30% 30%;
box-shadow:-2px 3px 2px 0px #00000040;
display:flex;
align-items:center;
justify-content:center;
user-select:none;
}
.pichonten:active{
border-radius:60%/70% 70% 30% 30%;
}
</style>
<div class="pichonten"> </div>
mio様(id:mio20100501)のコメントでいただいたアイデア、てんとう虫をコードで描いてみました^^（先の「画像入り」のようにそういう画像を用意して入れる事でも実現できます）
radial-gradientが増えていますが、上から「目」「頭」「星」「星」「星」「星」「右上からの影（ほぼ見えない^^;）」で、最後に地の羽色（#ff0000=赤）となっています。
他にもいただいたアイデア
S様(id:odanoura)からも素敵なアイデアをいただいておりますｗ
とりあえず挑戦はしてみました^^
これについては、敢えてサンプルは載せず、コードだけ置いておきますねｗｗｗ
コード
<style>
.poyon{
width:150px;
height:100px;
background:
radial-gradient(5% 8% at 50% 8%,#ffcccc 90%,#ffcccc00 100%)
,radial-gradient(5% 8% at 50% 9%,#88888880 90%,#88888800 100%)
,radial-gradient(10% 10% at 50% 15%,#ffcccc 99%,#ffcccc00 100%)
,radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%)
,radial-gradient(at 100% 0%,#00000010,#00000000),#fce4d3;
border-radius:50%/70% 70% 30% 30%;
box-shadow:-2px 3px 2px 0px #00000040;
display:inline-flex;
align-items:center;
justify-content:center;
user-select:none;
}
.poyon:active{
border-radius:60%/70% 70% 30% 30%;
}
</style>
<div class="poyon"> </div>
<div class="poyon"> </div>
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
