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 sent to your email.

Leave a Comment

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

Discover more from Coursity

Subscribe now to keep reading and get access to the full archive.

Continue reading

Scroll to Top
How to install docker and docker compose on ubuntu 20. Us giant amd epyc servers. Clustered hosting platform get a host.