Frontend Challenge: June Beach Sunset

Frontend Challenge: June Beach Sunset

This is a submission for Frontend Challenge v24.04.17, CSS Art: June.

Inspiration

June can mean travel and beach sunsets. I made a CSS Sunset.

Demo

Sunset on the ocean

<div class="flex-container">
<div class="main"> <div class="outer_frame"> <div class="wrapper_container"> <div class="wrapper"> <div class="sky"> <div class="sun"></div> </div> <div class="ocean"> <div class="reflect"> <div class="wave_group_sun"> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> </div> </div> </div> </div> </div> </div> </div>
</div> 
Enter fullscreen mode
Exit fullscreen mode
.wrapper_container { width: 900px; height: 400px; display: flex; align-items: center; } .wrapper{ display: flex; justify-content: center; flex-direction: column; position: absolute; overflow: hidden;
} .sky { width: 900px; height: 250px; background: linear-gradient( to top, var(--Yellow) 14%, orange, var(--Red), var(--Pink) ); display: flex; justify-content: center;
} .ocean { width: 900px; height: 250px; background: linear-gradient(#4981b3, navy); border-top: 2px solid #3030a0c9; display: flex; overflow: hidden; justify-content: center; position: relative;
} .sun{ width: 200px; height: 422px; transform: rotate(90deg); border-radius: 50%; margin-top: 48px; background: linear-gradient(to left, rgb(255 215 0 / 38%), #ffa5007d, rgb(255 0 0 / 26%), rgb(255 0 167 / 34%)); filter: drop-shadow(-2px 2px 13px #FF5722); } .reflect { width: 200px; height: 422px; transform: rotate(90deg); border-radius: 50%; margin-top: -200px; background: linear-gradient(to left, rgb(255 215 0 / 38%) #ffa5007d, rgb(255 0 0 / 26%), rgb(255 0 167 / 34%)); filter: drop-shadow(-2px 2px 13px var(--Red)); filter: blur(4px);
} .wave_group_sun{ transform: rotate(90deg); position: relative; justify-content: space-evenly;
} .wave { background: var(--White); height: 3px; width: auto; border-radius: 20%; margin-bottom: 68px; filter: blur(2px);
} 
Enter fullscreen mode
Exit fullscreen mode

Journey

The sunset is made using multiple gradients. The sky uses Yellow, red, orange and pink. Going from bottom to top. Originally it was top to bottom but that blended too much with the Sun.
The sun and reflection uses similar colors flowing right to left in a rotated circle. With the reflection using a bit of blur.
The Ocean is made of blue gradients with white lines for wave crests.


Discover more from Coursity

Subscribe to get the latest posts to your email.

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *