CSSでクリスマスツリーをつくる
https://gyazo.com/30a8421e6ab73fdf835f37b7277e4b1c
この記事はDigital Identity Creative Div. Advent Calendar 2019 15日の記事です。
冬といえばクリスマス！
クリスマスといえばクリスマスツリー！
そこで今日はCSSでクリスマスツリーを作成します！
木をつくる
まずはベースとなる木の部分を作成します。
幹は普通のボックス、
葉の部分は三角形を3つ重ねてそれっぽくします。
https://gyazo.com/c2f8c39d21e57cceb95317ba5e97582a
いいかんじ〜
装飾をつくる
クリスマスツリーなんで、飾り付けをしなくちゃいけませんね！
今回はツリーの装飾といえばおなじみの水餃子を使って飾ります！
水餃子のCSS
擬似要素を少々具と羽の部分をなんやかんやしました。
時間がある時にもっとちゃんとひだが分かれているものを作成します。。
https://gyazo.com/92497fbdd0f1a1a67ab6255d255be803
できた水餃子をを飾りつけます！
absolute要素を使用してバラします。
少し大きさもばらしていいかんじにします。
https://gyazo.com/55ed90d065516de3cccd772989a85441
美しい…
輝かせる
やはりツリーといえばイルミネーション。
せっかくなのでアニメーションを使って餃子を光らせてみましょう。
box-shadowを使い光彩をつけ、さらに5秒単位でほわっと輝くアニメーションをつけました。
https://gyazo.com/19bac55c0eb23638617767088d71c07f
完成！！！
実際のものはこちら：CSSで餃子クリスマスツリー
※PCでみてね！
本当はいろんな色をつけようかと思ったのですが、やはり餃子本来の白色が美しく際立ちます。
きらびやかで美しく美味しいツリーができました！
みなさんもぜひ作ってみてくださいね★
/icons/hr.icon
★編集後記
今回はひとつくらいふざけたまともな記事を描きたいなーと思って作成しました。
ちなみに2015年に栃木県の某SAに寄ったときに「餃子の木」なるものがありました。そこからインスピレーションを受けました。
https://gyazo.com/05af753a6eeb35801a6583d065988879
明日は星さん。あれってなんでしょうね！