どうも！LSSです！！
今日はCSS小ネタです。
水滴
してみてね
コード
<style>
.pichon{
width:150px;
height:100px;
background:radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%),radial-gradient(at 100% 0%,#00000020,#00000000);
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;
}
.pichon:active{
border-radius:60%/70% 70% 30% 30%;
}
</style>
<div class="pichon">クリック<br />してみてね</div>
CSSで水滴を描いてみました
クリック連打すると、ちょっとだけぷるぷるしますｗ
以下、部分的にコード解説。
border-radius:50%/70% 70% 30% 30%;
border-radiusで水滴の形状を作成しています。
もう半年近く前の記事になりますが、
でやった事の応用ですね。
background:radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%),radial-gradient(at 100% 0%,#00000020,#00000000);
２つのradial-gradientを使って中を塗っています。
ひとつめの「radial-gradient(at 70% 25%,#ffffff80 10%,#ffffff00 13%)」が右上のハイライト、ふたつめの「radial-gradient(at 100% 0%,#00000020,#00000000)」は右上を中心とした黒透過色のグラデーションとなります。
box-shadow:-2px 3px 2px 0px #00000040;
で左下に少しだけ、影を落としています。
色付けに関連しているのは、先のbackgroundとこのbox-shadowだけで行っている事になりますね。
display:flex;
align-items:center;
justify-content:center;
この３行は、中に入る文字の上下左右中央寄せです。
user-select:none;
この一行を入れておく事で、クリックした時に誤って「中の文字を選択」状態になる事を防いでいます。（この一行が書かれている要素は文字選択できなくなります）
.pichon:active{
border-radius:60%/70% 70% 30% 30%;
}
「:active」疑似クラスは「クリックした時」にのみ適用される変更です。
水滴の形状を作っていた、border-radiusを値を少し変えて指定している事で、ぷるぷる感を出しています。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
