この記事はウェブクルー Advent Calendar 2018の16日目の記事です。
昨日は@kalzitさんの「KtorでWebAPI」でした。
はじめに
もうすぐクリスマスですね！
弊社のある恵比寿ガーデンプレイスでは広場に毎年大きなクリスマスツリーが展示されます。
そこからレッドカーペットがすーっと伸び、その先にはアノ有名なBaccarat様のグラスツリーが･･･（美）
ということで、かなりデフォルメされイラスト化してますが、思い付きでそのクリスマスツリーをHTMLとCSSだけで書いてみました。
どうぞさらっとご覧ください。
ソースコード
See the Pen CSSでクリスマスツリー by maiunderwood (@maiunderwood) on CodePen.
解説
ざっくりですが、解説しますと･･･。
基本は要素を作り、形を作り、色をつけ、回転させ、配置するの繰り返しです。
図形を作り、それを組み合わせていくイメージです。
-
もみの木
divで正方形を作成します。
border-radiusで1つの角だけ50%にする（扇形の完成）。
弧の部分が下に来るようにtransform:rotateで回転させる。
これを3つ作成して、正方形の大きさを少しずつ変え、ずらして重ねれば完成！
ちなみに下に黒いborderをつけることで影を演出し、上に白いborderをつけることで雪が積もった感を演出してみました。 -
オーナメント（赤）
もみの木に似ていて、今度は1つの角以外をすべてのborder-radiusを50%にします。
そうすると涙型になりますね、これもtransform:rotateで回転させます。 -
6点の星（トップスター）
divを作成したら、borderを使って三角形を作ります。
疑似要素を使ってもう一つ三角形を作るのですが、この時最初に作った三角形とは逆になるように作ります。
これらをpositionでうまく重ね合わせると･･･6点の星の出来上がりです。
･･･とこのようにお好きなオーナメントを作成していき、それをpositionで配置（飾り付け）します。
オーナメントはCSSアニメーションを取り入れて動きを出すと雰囲気が出てちょっとリッチになります。
-
レッドカーペット
borderを使って台形を作成します。
長さが出るように調整すれば･･･ちょっとだけ奥行きのある感じに見えますね！ -
雪
サイズを大小作り、CSSアニメーションを使ってハラハラと舞わせてみました。
落ちていきながら左右に少し移動させると舞ってる感がでますね。こちらはtransform: translateで左右に移動させました。
さらに少し時間差をつけてあげると･･･いい雰囲気が出ます（笑）
最後に
こんな遊びのようなコーディングも、実際やってみるとすごく勉強になります。
CSSプロパティもたくさん種類があって業務だけではなかなか使いこなせないので、こういったときに色々試してみるといいかもです。
ウェブクルーでは一緒に働いていただける方を随時募集しております。
お気軽にエントリーくださいませ。