This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.
Inspiration
The inspiration for this challenge came from a very famous Bible verse about the Living God creating heaven and earth.
I wanted to remind that God cares for all things and He has intentionally placed the beautiful things which we all enjoy on this earth and most of all He cares about saving the souls of men. I hope that this verse inspires us to really pay attention to God's creation and be responsible with the way we treat our world.
Demo
https://codepen.io/polinaeliana/full/ExJJXBo
Journey
Before participating in this challenge I didn’t know that CSS Art even existed, I have just completed the beginner level web dev course on codeacademy https://www.codecademy.com/enrolled/paths/learn-how-to-build-websites where I’ve acquired the robes of basics for web development. At the start of the challenge I felt both excited and curious, immediately I jumped into the ocean of search where I came across few very helpful articles, one of which was on https://medium.com/@juliet.brown/creative-coding-learning-to-draw-with-css-96a49bccd7a5 . This article became my go to throughout the whole project, this was where I learned how to create basic shapes with border-radius, clip-path and discovered resources like https://bennettfeely.com/clippy/ and https://9elements.github.io/fancy-border-radius/#30.30.35.22-- which are the tools to help you create shapes. For this project I dicided to work with circle shapes to create my center piece which is the big cloud. I started by setting the border-radius for all the circles to
clip-path: circle(50% at 50% 50%) I found how to do it here https://stackoverflow.com/questions/65688188/css-clip-path-partial-circles, I also had to set both width and height to 300px. For position I set the main circle (.cloud) to Relative and the rest of the circles to Absolute so that they can be easily adjusted by setting top and left to the appropriate px. I wanted to highlight specific parts of each circle with the border so I chose the silver shade in rgb(227, 224, 224), and added it to the border which was set to 15 px and solid. Next I had to choose where exactly I wanted the silver lining to be on each piece, for that I used border-bottom, border-top, border-top-left-radius, border-top-right-radius, border-bottom-left-radius and border-bottom -right-radius, depending on the position of the lining I set the values of these properties to either none or 50%. Last but not least on my mind was animation, this was something non-negotiable for me because since completing the course on codeacademy I dipped by feet into the waters of animation and absolutely loved the effects and influence it carries over the whole look of whatever you’re building. So I added my animation on both the cloud itself and the Bible verse by using @keyframes. Overall this was a great challenge to be apart of and it gave me an opportunity to code in a way I never did before. I am looking forward to participate in the future challenges.
Top comments (0)