この記事は ゆめみ Advent Calendar 2021 の24日目の記事です。
はじめに
みなさまは「クリスマス」と聞いて何を思い浮かべますか？サンタクロースでしょうか。それともイルミネーションでしょうか。
私の場合は家の中に飾っていたクリスマスツリーを思い浮かべます。
我が家では、毎年クリスマスの日にクリスマスツリーの前にプレゼントとサンタさんからの手紙が置いてありました。もうクリスマスツリーは飾っていませんが、あの頃を思い出して HTML + CSS でクリスマスツリーを作ろうと思います。
星
昔は擬似要素( ::before / ::after )を使用して作成していましたが、 IE のサポートが終了するので clip-path を使用して作成します。
clip-path に関しては、 Clippy というサイトがおすすめです。
See the Pen
star.html by takashi (@takashimelon)
on CodePen.
ツリー
星と同じく clip-path を使用して作成します。葉の部分は polygon でもよかったのですが、少し丸みを帯びさせるために path で作成しています。
See the Pen
tree.html by takashi (@takashimelon)
on CodePen.
オーナメント
clip-path の circle でも作成できますが、慣れ親しんだ border-radius で作成しています。
また、オーナメントは基本光りませんが、アニメーションさせたくなったので光らせます。
See the Pen
ornament.html by takashi (@takashimelon)
on CodePen.
クリスマスツリー
星・ツリー・オーナメントを配置すれば完成です。
See the Pen
christmas-tree.html by takashi (@takashimelon)
on CodePen.
おわりに
メリークリスマス！
おまけ ~SVG編~
丸みをつけたいと思い、 SVG でも実装しました。ベジェ曲線を完全に理解すれば clip-path でも実装できますが、今回はシンプルかつ簡単に実装するために stroke-linejoin="round" で丸みを表現しました。
See the Pen
christmas-tree.svg by takashi (@takashimelon)
on CodePen.
↧