【CSS】box-shadowで月や星を描く
記事更新日：2022-02-01
box-shadowって、何ができるの？
【 Point 】
box-shadow: 0 0 10px yellow;
中心から10px分、ぼかしを入れる
影を重ねるだけで芸術的な表現ができるよ。
中心（x y = 0 0）から、ぼかす
まずは、影を１重で作ってみよう。
ここをクリックしてコードを見る
.moon {
width: 100px;
height: 100px;
background: #FFEDA1;
border-radius: 50%;
box-shadow: 0 0 10px #FFEDA1;
}
【 Point 】
box-shadow: 0 0 10px yellow;
中心 0 の位置から10px分 ぼかす。
ほんのりした影は、カードやボタンでよく見かける。
box-shadowは insetで内側に入れられる
外側を２重、内側に黒を入れてみよう。
内側に影を入れたいときは inset を使う。
ここをクリックしてコードを見る
.moon {
box-shadow: 20px -12px 30px rgba(0,0,0,.5) inset,
0px 0px 10px #a99e71,
0px 0px 20px #FFEDA1;
}
影を増やして黒も入れたら、月っぽくなった。
ちなみに内側の影は、ぼかしを消すと、こういう形。
【 Point 】
box-shadow: 20px -12px 0px rgba(0, 0, 0, 0.5) inset;
３つ目の「ぼかし」の数値を０ にすれば、くっきりとした影になる。
内側にするか・外側にするか、
ぼかしを入れるか・入れないか、
それだけで、全然違った絵になる。
さらに影を重ねてみる
外側を３重にしてみた。
ここをクリックしてコードを見る
.moon {
box-shadow: 20px -12px 30px rgba(0,0,0,.5) inset,
0 0 10px #a99e71,
0 0 20px #a99e71,
0 0 30px #a99e71;
}
黒い部分は、ウサギのいるところ。
影５重
もっと明るくしてみよう。
ここをクリックしてコードを見る
.moon {
box-shadow: 0 0 10px #FFEDA1,
0 0 20px #FFEDA1,
0 0 30px #FFEDA1,
0 0 40px #FFEDA1,
0 0 50px #FFEDA1;
}
かなり明るすぎて月には見えないかも。
でも、こういう星はありかも。
外側を赤にする
赤く光ることもあるよね。
ここをクリックしてコードを見る
.moon {
box-shadow: 0 0 10px #FFEDA1,
0 0 20px #FFEDA1,
0 0 30px #FFEDA1,
0 0 40px #FFEDA1,
0 0 50px #FFEDA1;
0 0 200px #ff1177;
}
新星っぽい雰囲気になった。
filter: drop-shadowでアニメーションさせてみる
box-shadowよりfilterをアニメーションさせるのがオススメ。
ここをクリックしてコードを見る
@keyframes moon-anim {
100% {
filter: drop-shadow(0 0 .1px #fff);
}
}
すごく明るくなった。
まとめ
box-shadowは内側にも外側にも配置できる。
工夫次第で、月や星のような表現に。
３つ目が一番、月っぽいかな。
コードペンで。
2022-02-01
編集後記：
この記事の内容がベストではないかもしれません。