CSS ART : Something Unique about JUNE

#frontendchallenge #devchallenge #css

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

Inspiration

The inspiration behind the June-themed CSS art is a blend of seasonal elements associated with the month of June.

Sun: June often marks the beginning of summer in many parts of the world. The sun is a symbol of warmth, longer days, and outdoor activities. The bright yellow sun in the art represents the sunny days of June.
Leaves: In Africa, because that is my location. June is a time of transition. it's when leaves are lush and green, while in the southern part of the country, it might be the start of autumn with leaves changing color. The green leaves in the artwork capture this duality.
Raindrops: June can bring both rain and sunshine. The raindrops symbolize the occasional showers that nourish the earth and contribute to the vibrant greenery. They also represent the unpredictability of weather during this month.
Colors: The choice of colors—yellow for the sun, green for leaves, and blue for raindrops—reflects the natural palette associated with June.

Demo

HTML CODE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>CSS Art</title>

</head>
<body>
    <div class="sun"></div>
    <div class="leaf leaf1"></div>
    <div class="leaf leaf2"></div>
    <div class="raindrop raindrop1"></div>
    <div class="raindrop raindrop2"></div>
    <div class="raindrop raindrop3"></div>
    <div class="raindrop raindrop4"></div>
</body>
</html>

CSS CODE

* {
    padding: 0;
    margin: auto;
    box-sizing: border-box;
}

body {
    background-color: black;
}

/* Sun */
 .sun {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: #f9d71c;
    border-radius: 50%;
}

/* Leaves */
.leaf {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 40px solid #228b22;
    transform-origin: bottom center;
}

/* Leaf 1 */
.leaf1 {
    top: 60%;
    left: 30%;
    transform: rotate(30deg);
}

/* Leaf 2 */
.leaf2 {
    top: 60%;
    left: 70%;
    transform: rotate(-30deg);
}

/* Raindrops */
.raindrop {
    position: absolute;
    width: 10px;
    height: 20px;
    background-color: #00aaff;
    border-radius: 50%;
    animation: fall 2s infinite linear;
}

/* Raindrop 1 */
.raindrop1 {
    top: 10%;
    left: 20%;
}

/* Raindrop 2 */
.raindrop2 {
    top: 15%;
    left: 40%;
}

/* Raindrop 3 */
.raindrop3 {
    top: 20%;
    left: 60%;
}

/* Raindrop 4 */
.raindrop4 {
    top: 25%;
    left: 80%;
}

/* Animation */
@keyframes fall {
    0% {
        transform: translateY(-10%);
    }
    100% {
        transform: translateY(100%);
    }
}

Journey

The Process

Inspiration: The initial inspiration came from the user’s prompt, which mentioned various aspects of June—summer solstice, falling leaves, Father’s Day, and Pride Month.

Conceptualization: I visualized a scene that combined these elements: a sunny day with green leaves, raindrops, and a cheerful vibe.

Design Choices: I chose simple shapes (sun, leaves, raindrops) and vibrant colors to represent June’s essence.

CSS Implementation: I crafted the art using CSS properties like position, border-radius, and animation.

Animation: The raindrops falling animation was added to create movement and dynamism.

What i Learn
_*CSS Art Techniques: *_Creating art with CSS involves thinking creatively within the constraints of CSS properties. It’s a fun way to blend design and code.

Symbolism: Each element in the art symbolizes something—sun for warmth, leaves for seasonal change, and raindrops for unpredictability.

what am particularly Proud of

Balancing Simplicity and Aesthetics: Achieving a visually appealing result with minimal shapes and colors.
Responsive Design: Ensuring the art adapts well to different screen sizes.

Next Steps:
Explore More Complex Art: I’d like to experiment with more intricate CSS art, perhaps incorporating gradients, shadows, and more detailed shapes.

Interactive Elements: Adding interactivity (hover effects, transitions) to CSS art for an engaging user experience.

Collaboration: Collaborating with other developers/artists to create larger-scale CSS art projects.