クリスマスなのでHTML + CSSだけでクリスマスツリーを最速で作るRTAをやります。
JavaScript使いません。
画像も使いません。
完成イメージ
- CSS三角形でツリー
- オーナメントは
::before - 星はアニメーション付き
背景とセンタリング
まずはhtmlとセンタリングされたコンテナを用意します。
<div class="tree">
<div class="layer layer-1"></div>
<div class="layer layer-2"></div>
<div class="layer layer-3"></div>
<div class="trunk"></div>
<div class="star">★</div>
</div>
ここから順にcssを書いていきます
.layer {
position: absolute;
left: 50%;
transform: translateX(-50%);
border-left: 120px solid transparent;
border-right: 120px solid transparent;
border-bottom: 140px solid #0f9d58;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
}
CSS三角形でツリーを作る
CSSの border三角形テクを使います。
.layer {
position: absolute;
left: 50%;
transform: translateX(-50%);
border-left: 120px solid transparent;
border-right: 120px solid transparent;
border-bottom: 140px solid #0f9d58;
}
これを 3段重ねるとツリーになります。
レイヤーを三段に
.layer-1 {
top: 40px;
}
.layer-2 {
top: 110px;
border-left-width: 140px;
border-right-width: 140px;
border-bottom-width: 160px;
}
.layer-3 {
top: 190px;
border-left-width: 160px;
border-right-width: 160px;
border-bottom-width: 180px;
}
オーナメントをばら撒く
疑似要素で丸を作り、box-shadow で量産します。
.layer::before {
top: 40px;
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ff4d4d;
box-shadow:
30px 60px gold,
-40px 80px #4dd2ff,
10px 45px #ff8fd8,
-20px 30px #ffd966;
}
幹をつくる
.trunk {
position: absolute;
top: 360px;
left: 50%;
transform: translateX(-50%);
width: 44px;
height: 70px;
background: linear-gradient(#8b5a2b, #6e421f);
border-radius: 6px;
}
星を光らせる
ベツへレムの星ってやつです。
.star {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
font-size: 32px;
color: gold;
z-index: 10;
text-shadow:
0 0 8px rgba(255, 215, 0, 0.8),
0 0 16px rgba(255, 215, 0, 0.5);
animation: twinkle 2.5s infinite ease-in-out;
}
@keyframes twinkle {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
完成
メリークリスマス！！！！
完成コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>CSS Christmas Tree</title>
<style>
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at top, #0b1d33, #020409);
font-family: system-ui, sans-serif;
}
.tree {
position: relative;
width: 360px;
height: 450px;
}
.star {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
font-size: 32px;
color: gold;
z-index: 10;
text-shadow:
0 0 8px rgba(255, 215, 0, 0.8),
0 0 16px rgba(255, 215, 0, 0.5);
animation: twinkle 2.5s infinite ease-in-out;
}
.layer {
position: absolute;
left: 50%;
transform: translateX(-50%);
border-left: 120px solid transparent;
border-right: 120px solid transparent;
border-bottom: 140px solid #0f9d58;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
}
.layer-1 { top: 40px; }
.layer-2 {
top: 110px;
border-left-width: 140px;
border-right-width: 140px;
border-bottom-width: 160px;
}
.layer-3 {
top: 190px;
border-left-width: 160px;
border-right-width: 160px;
border-bottom-width: 180px;
}
.layer::before {
top: 40px;
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: #ff4d4d;
box-shadow:
30px 60px gold,
-40px 80px #4dd2ff,
10px 45px #ff8fd8,
-20px 30px #ffd966;
}
.trunk {
position: absolute;
top: 360px;
left: 50%;
transform: translateX(-50%);
width: 44px;
height: 70px;
background: linear-gradient(#8b5a2b, #6e421f);
border-radius: 6px;
}
@keyframes twinkle {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
</style>
</head>
<body>
<div class="tree">
<div class="layer layer-1"></div>
<div class="layer layer-2"></div>
<div class="layer layer-3"></div>
<div class="trunk"></div>
<div class="star">★</div>
</div>
</body>
</html>
</details>
最後に
ぜひ上記のコードを、ローカルやCodePenなどで動かしてみてください。
メリークリスマス！！！🎅🎄
今年も残りあと少し、健康に気をつけてお過ごしください。