This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.
Introduction:
Happy Earth Day, DEV community! In honor of this important day, I'm thrilled to share my project: a unique artwork depicting the Earth's continents, entirely crafted using CSS!
Inspiration:
This project was inspired by the beauty and fragility of our planet. Earth Day is a reminder to appreciate and protect our environment.
Demo:
Let's celebrate our planet with this artistic exploration! Check out the live demo and share your thoughts:
HTML MARKUP
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="html" content="text/html; charset=utf-8" />
<title>earth day css art</title>
<link rel="stylesheet" href="earthday-art.css">
</head>
<body>
<div class="container">
<div class="earth">
<div class="text">
<h1>Happy Earth Day</h1>
<p>"The environment is where we all meet; where all have a mutual interest; it is the one thing all of us share".</p>
</div>
</div>
</div>
</body>
</html>
CSS CODE
body{
background:#4BD2FB;
}
.earth{
background:url('land.png');
background-color:#48C528;
border:2px solid whitesmoke;
border-radius:100%;
height:50em;
width:50em;
position: absolute ;
top:10rem;
left:5rem;
text-align:center;
animation:rotate 3s infinite;
}
@keyframes rotate{
50%{
transform:rotate(10deg);
}
}
h1{
position:absolute;
top:2em;
left:0.6em;
font-size:99px;
text-shadow: 5px 6px #C5C13A;
font-family:"Brush Script MT",cursive;
transition:0.4;
animation:shadows 5s infinite;
}
p{
position:absolute;
top:24em;
left:0.6em;
font-family:"monospace";
}
@keyframes shadows{
0%{
text-shadow: 5px 6px #C5C13A;
}
25%{
text-shadow: 5px 6px #20FFBB;
}
50%{
text-shadow: 5px 6px #3F9B34;
}
75%{
text-shadow: 5px 6px #18A3C1;
}
100%{
text-shadow: 5px 6px #186DC1;
}
}
Public Link:
https://earthdaycss.netlify.app/earthday-markup.html
Journey:
This project was a fun and educational dive into the world of CSS art. Here's a look at my creative process:
Technical Exploration: This project allowed me to experiment with different CSS properties. I used features like gradients, shadows, and potentially even subtle animations to create a sense of depth and dimension for the continents and background.
Enhancing the Continents: While the continents might have started as a reference image (PNG), the focus was on transforming them with CSS. I experimented with stylistic borders, textures, and highlighting specific geographical features to make them stand out.
Crafting the Background: Creating a visually compelling backdrop for the continents was key. This could involve contrasting colors, textures, or even elements like oceans or clouds created with gradients and filters.
Celebrating Earth Day with Code:
This project has been a rewarding way to celebrate Earth Day with a creative twist. It allowed me to showcase how code can be used for artistic expression and raise awareness about our planet's precious resources.
Call to Action:
What do you think of my Earth Day-themed CSS art? Do the visuals inspire you to take action towards protecting our planet? Share your thoughts and ideas in the comments below!
Let's use creativity and technology to celebrate Earth Day and advocate for a sustainable future!
Resources I Used In My Project:
I used a png image from i.pinimg.com
https://i.pinimg.com/originals/75/7e/10/757e102d4571bc9f23e33d74b2ba7945.png
Top comments (1)
This is pretty cool. Awesome submission. Great read too!!!