CSS Art: June

#frontendchallenge #devchallenge #css

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

Inspiration

For this CSS Art project themed around June, I focused on representing the vibrant and sunny aspects of the month, particularly the summer solstice. June is often associated with clear blue skies, warm sunshine, and blooming nature. This piece aims to capture the essence of summer with a bright, cheerful scene.

Demo

You can view the live demo and edit the code on Codepen

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Art - June</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to top, #87CEEB, #ffffff);
  }
  .scene {
    position: relative;
    width: 300px;
    height: 300px;
  }
  .sun {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #FFD700, #FFA500);
    border-radius: 50%;
  }
  .grass {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, #32CD32, #7CFC00);
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
  }
  .flower {
    position: absolute;
    width: 20px;
    height: 20px;
    background: pink;
    border-radius: 50%;
    box-shadow: 0 0 0 10px white, 0 0 0 20px pink;
  }
  .flower:nth-child(2) {
    top: 220px;
    left: 50px;
  }
  .flower:nth-child(3) {
    top: 200px;
    left: 150px;
  }
  .flower:nth-child(4) {
    top: 230px;
    left: 250px;
  }
  .butterfly {
    position: absolute;
    width: 20px;
    height: 20px;
    background: orange;
    border-radius: 50%;
    box-shadow: 10px 10px 0 orange, -10px 10px 0 orange;
  }
  .butterfly:nth-child(5) {
    top: 50px;
    left: 100px;
  }
  .butterfly:nth-child(6) {
    top: 80px;
    left: 200px;
  }
</style>
</head>
<body>
  <div class="scene">
    <div class="sun"></div>
    <div class="grass"></div>
    <div class="flower"></div>
    <div class="flower"></div>
    <div class="flower"></div>
    <div class="butterfly"></div>
    <div class="butterfly"></div>
  </div>
</body>
</html>

Journey

The process of creating this CSS Art was a delightful experience. I started by brainstorming the key elements that symbolize June: the sun, clear skies, green grass, flowers, and butterflies. Using pure CSS, I experimented with gradients, positioning, and box shadows to bring these elements to life.

Key Learnings:

Gradients and Positioning: Learned to effectively use gradients for the background and different elements.
Box Shadows: Used box shadows creatively to simulate petals and butterfly wings.

Positioning: Improved my understanding of absolute positioning for placing elements precisely.

What I'm Proud Of:

I am particularly proud of how the sun and the overall scene came together, creating a warm and inviting representation of June. The butterflies add a dynamic touch, making the scene feel more alive.

Future Improvements:

I hope to further refine my skills by adding more complex animations and interactivity to future CSS Art projects, such as making the butterflies flutter or adding a gentle sway to the flowers.

Thank you for considering my submission!