【CSS】box-shadowで月や星を描く
記事更新日:2022-02-01
![サムネイル](https://tsukiusagi.biz/wp-content/uploads/2022/01/css.png)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-1.png?resize=150%2C150&ssl=1)
box-shadowって、何ができるの?
【 Point 】
box-shadow: 0 0 10px yellow;
中心から10px分、ぼかしを入れる
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3-1.png?resize=150%2C150&ssl=1)
影を重ねるだけで芸術的な表現ができるよ。
中心(x y = 0 0)から、ぼかす
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
まずは、影を1重で作ってみよう。
ここをクリックしてコードを見る
.moon {
width: 100px;
height: 100px;
background: #FFEDA1;
border-radius: 50%;
box-shadow: 0 0 10px #FFEDA1;
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/moon-boxshadow-1.png?resize=532%2C448&ssl=1)
【 Point 】
box-shadow: 0 0 10px yellow;
中心 0 の位置から10px分 ぼかす。
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
ほんのりした影は、カードやボタンでよく見かける。
box-shadowは insetで内側に入れられる
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
外側を2重、内側に黒を入れてみよう。
内側に影を入れたいときは inset を使う。
ここをクリックしてコードを見る
.moon {
box-shadow: 20px -12px 30px rgba(0,0,0,.5) inset,
0px 0px 10px #a99e71,
0px 0px 20px #FFEDA1;
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/moon-boxshadow-2.png?resize=522%2C448&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
影を増やして黒も入れたら、月っぽくなった。
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
ちなみに内側の影は、ぼかしを消すと、こういう形。
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/スクリーンショット-2022-02-01-19.22.49.png?resize=259%2C220&ssl=1)
【 Point 】
box-shadow: 20px -12px 0px rgba(0, 0, 0, 0.5) inset;
3つ目の「ぼかし」の数値を0 にすれば、くっきりとした影になる。
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
内側にするか・外側にするか、
ぼかしを入れるか・入れないか、
それだけで、全然違った絵になる。
さらに影を重ねてみる
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
外側を3重にしてみた。
ここをクリックしてコードを見る
.moon {
box-shadow: 20px -12px 30px rgba(0,0,0,.5) inset,
0 0 10px #a99e71,
0 0 20px #a99e71,
0 0 30px #a99e71;
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/moon-boxshadow-3.png?resize=524%2C450&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
黒い部分は、ウサギのいるところ。
影5重
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
もっと明るくしてみよう。
ここをクリックしてコードを見る
.moon {
box-shadow: 0 0 10px #FFEDA1,
0 0 20px #FFEDA1,
0 0 30px #FFEDA1,
0 0 40px #FFEDA1,
0 0 50px #FFEDA1;
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/moon-boxshadow-4.png?resize=522%2C446&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
かなり明るすぎて月には見えないかも。
でも、こういう星はありかも。
外側を赤にする
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
赤く光ることもあるよね。
ここをクリックしてコードを見る
.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;
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/moon-boxshadow-5.png?resize=524%2C442&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
新星っぽい雰囲気になった。
filter: drop-shadowでアニメーションさせてみる
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
box-shadowよりfilterをアニメーションさせるのがオススメ。
ここをクリックしてコードを見る
@keyframes moon-anim {
100% {
filter: drop-shadow(0 0 .1px #fff);
}
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-moon6.gif?resize=524%2C442&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
すごく明るくなった。
まとめ
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
box-shadowは内側にも外側にも配置できる。
工夫次第で、月や星のような表現に。
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/02/b-moon7.gif?resize=783%2C444&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-2.png?resize=150%2C150&ssl=1)
3つ目が一番、月っぽいかな。
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
コードペンで。
2022-02-01
編集後記:
この記事の内容がベストではないかもしれません。