This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.
Introduction
"Climate change is a pressing global issue that requires immediate attention and action. Rising temperatures, melting ice caps, and extreme weather events are just a few of the devastating consequences of human activities on our planet. We must reduce our carbon footprint, transition to renewable energy sources, and adopt sustainable practices to mitigate the effects of climate change. It's a collective responsibility that demands individual and collective action. Let's work together to protect our planet and ensure a livable future for generations to come."
Inspiration
I have created a CSS art piece that depicts the impact of climate change on our planet. Using only CSS, I have designed an interactive animation that showcases the Earth's distress and its potential transformation into a thriving planet.
Through careful manipulation of CSS gradients, shapes, and animations, I have brought this environmental message to life. The Earth's "face" and "eyes" are crafted from intricate CSS shapes, while the animations simulate the effects of global warming and the potential for positive change.
Demo
Code:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<style>
*{
transition:1.5s;
}
body{
background-color:#0924A8;
display: grid;
place-items: center;
}
.earth{
height:300px;
width:300px;
background:radial-gradient(circle at 50% 1%,#0D9008,#2A64D9,#D53B3BBD);
border-radius:50%;
box-shadow:0 0 40px #FF0000;
overflow:hidden;
transition:1.5s;
}
.face{
position: absolute;
left:50%;
top:50%;
}
.eye1,.eye2{
height:50px;
width:25px;
background-color:black;
border-radius:50%;
position: absolute;
top:-60;
}
.eye1{
left: -50px;
}
.eye2{
left:50px;
}
.mouth{
position: absolute;
width: 178px;
height: 180px;
border: 15px solid transparent;
top:5px;
left: -75px;
box-sizing: border-box;
border-radius: 50%;
border-top-color:black;
transition:0s;
}
.earth:hover .mouth{
border-bottom-color:black;
border-top:none;
top:-90px;
}
.earth:hover{
box-shadow:0 0 100px #08FFB9; background:radial-gradient(circle at 50% 1%,#0D9008,#2A64D9);
}
.earth:hover .eye1{
top:-100px;
}
.earth:hover .eye2{
top:-100px;
}
</style>
<body>
<div class="container">
<div class="earth">
<div class="face">
<div class="eye1"></div>
<div class="eye2"></div>
<div class="mouth">
</div>
</div>
<div class="plant"></div>
</div>
</div>
</body>
Live link to view the project:
https://earthdaycss.netlify.app/
Journey
Through this project, I have learned:
- The importance of environmental awareness and the impact of climate change on our planet
- How to effectively convey a message through interactive and visually striking designs
- Advanced CSS techniques, including gradients, shapes, and animations
- The power of creativity and coding in raising awareness and inspiring action
- The value of experimentation and iteration in refining a design concept
- How to balance aesthetics and meaning to create a impactful and thought-provoking artwork
This project has not only honed my technical skills but also deepened my understanding of the critical issues facing our planet, and I hope to continue exploring the intersection of art, design, and environmental awareness in future projects.
Top comments (0)