2022年11月8日に皆既月食があり全国で話題となったので、CSSで皆既日食と皆既月食を作ってみました。
皆既日食
日食[1]（にっしょく、solar eclipse[1]）とは太陽が月によって覆われ、太陽が欠けて見えたり、あるいは全く見えなくなったりする現象である。
boxshadowでぼかしを入れることで良い感じの雰囲気ができました。
See the Pen 皆既日食 by mori (@mori-goq) on CodePen.
皆既月食
月食[1]（げっしょく、英語: lunar eclipse[1]）とは地球が太陽と月の間に入り、地球の影が月にかかることによって月が欠けて見える現象のことである。
皆既月食は#moonにoverflow: hidden;をつけて#earthとの乗算で赤色にしたかったのですが、四角で効いてしまうため、clip-path: circle(50%);で円で効くようにしてます。
See the Pen 皆既月食 by mori (@mori-goq) on CodePen.
まとめ
cssだけでも、簡単に綺麗な皆既日食・月食が作れました。
最後に
GoQSystemでは一緒に働いてくれる仲間を募集中です！
ご興味がある方は以下リンクよりご確認ください。