DEV Community

SRI CHAITANYA
SRI CHAITANYA

Posted on

1 2 1 4 1

Winter Solstice

<!DOCTYPE html>









Winter Solstice CSS Art

<br>
body {<br>
margin: 0;<br>
font-family: &#39;Arial&#39;, sans-serif;<br>
background: linear-gradient(to bottom, #001d3d, #003366);<br>
color: #fff;<br>
display: flex;<br>
flex-direction: column;<br>
align-items: center;<br>
justify-content: center;<br>
height: 100vh;<br>
overflow: hidden;<br>
transition: background 5s ease-in-out;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 5px #000;
}
.scene {
    position: relative;
    width: 300px;
    height: 300px;
}

.sun {
    position: absolute;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #ffec99, #ffb703);
    border-radius: 50%;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    animation: pulse 3s infinite;
    transition: background 5s ease-in-out;
}

.moon {
    position: absolute;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #d4d4dc, #828282);
    border-radius: 50%;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    display: none;
}

.ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, #00796b, #4caf50);
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
}

.tree {
    position: absolute;
    bottom: 40%;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 140px;
    background: linear-gradient(to top, #004d40, #2e7d32);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.tree::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 100px;
    background: linear-gradient(to top, #004d40, #388e3c);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.tree::after {
    content: "";
    position: absolute;
    bottom: 170%;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 60px;
    background: linear-gradient(to top, #004d40, #4caf50);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.snowflake {
    position: absolute;
    top: -10%;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.8;
    animation: fall 5s linear infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes fall {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translateY(120vh) scale(0.5);
        opacity: 0;
    }
}
Enter fullscreen mode Exit fullscreen mode

&lt;/style&gt;
</code></pre></div>
<p></head><br>
<body><br>
<h1>Winter Solstice</h1><br>
<div class="scene"><br>
<div class="sun"></div><br>
<div class="moon"></div><br>
<div class="tree"></div><br>
<div class="ground"></div><br>
&lt;!-- Snowflakes --&gt;<br>
<script><br>
const scene = document.querySelector(&#39;.scene&#39;);<br>
const sun = document.querySelector(&#39;.sun&#39;);<br>
const moon = document.querySelector(&#39;.moon&#39;);<br>
const body = document.body;</p>
<div class="highlight"><pre class="highlight plaintext"><code> // Generate snowflakes
for (let i = 0; i &lt; 50; i++) {
const snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.style.left = Math.random() * 100 + '%';
snowflake.style.animationDelay = Math.random() * 5 + 's';
snowflake.style.animationDuration = (3 + Math.random() * 2) + 's';
snowflake.style.width = snowflake.style.height = (Math.random() * 5 + 5) + 'px';
scene.appendChild(snowflake);
}

    // Change background and sun to moon during snowfall
    setInterval(() =&amp;gt; {
        body.style.background = body.style.background.includes('#001d3d') 
            ? 'linear-gradient(to bottom, #000814, #001d3d)' 
            : 'linear-gradient(to bottom, #001d3d, #003366)';
        sun.style.display = sun.style.display === 'none' ? 'block' : 'none';
        moon.style.display = moon.style.display === 'block' ? 'none' : 'block';
    }, 10000); // Switch every 10 seconds
&amp;lt;/script&amp;gt;
Enter fullscreen mode Exit fullscreen mode

&lt;/div&gt;
</code></pre></div>
<p></body><br>
</html></p>

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay