DEV Community

Cover image for Frontend Challenge: June Beach Sunset
Chris Jarvis
Chris Jarvis

Posted on

6

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.

A view with a background.

Sunset over an ocean.

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (1)

Collapse
 
jess profile image
Jess Lee β€’

πŸ™Œ

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

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay