はじめに
アドベントカレンダーといえばクリスマス。
クリスマスといえばツリー。
ということで、とってもありきたりですがクリスマスツリーをCSSで作ってみることにしました。
用意するもの
- もみの木
- 電飾
- てっぺんの星
- オーナメント
作ってゆく
もみの木
まずはもみの木から。これがないと始まりませんからね。
何となくもみの木は3段のイメージでいたんですが、画像検索してみるとそんなことないんですね。
いいんです。気にしません。borderを使っていい感じの三角形を作って、よしなに重ねていきます。
幹の部分もborderを使って台形を作り背面に置きます。
See the Pen tree by sasakiy (@sasakiy0819) on CodePen.
電飾
とにかくもう何が何でもキラキラ光らせたかったので、オーナメントの前にこれを作ります。
作り方は簡単。適当なサイズの円を作り、アニメーションを使ってbox-shadowで光彩を加えていきます。
See the Pen light by sasakiy (@sasakiy0819) on CodePen.
てっぺんの星
まず、五角形の星型の内角の和は180°になるということを思い出すところから始めます。
正五角形の星型にするには頂点の角度は36°にしたいところなので、36°-36°-108°の三角形を３つ用意して、それらを重ねて正五角形を作ります。
これに黒丸背景を重ねればサッポロビールのロゴの完成ですね。
See the Pen star by sasakiy (@sasakiy0819) on CodePen.
オーナメント
本当は杖とかヒイラギの葉とか作りたかったんですが、断念しました。
プレゼントの箱を用意することにします。
See the Pen ornament by sasakiy (@sasakiy0819) on CodePen.
組み立てる
用意したパーツたちをひたすら並べて組み上げていきます。
アクセントにアニメーションで雪を降らせてみたりします。
See the Pen merged by sasakiy (@sasakiy0819) on CodePen.
まとめ
CSSってなんでもできますねー。
普段の業務ではなかなか機会のなさそうな使い方ですが、きっとどこかで約には立つのではないかと思います。