The latest articles on DEV Community by Bhalli B (@bhallibhai). https://dev.to/bhallibhai https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1254437%2Fec089d06-b13c-4dfa-920c-e856c8c126f7.jpg https://dev.to/bhallibhai en Bhalli B Mon, 29 Apr 2024 18:34:15 +0000 https://dev.to/bhallibhai/recreating-a-gif-with-css-earth-day-edition-1k6m https://dev.to/bhallibhai/recreating-a-gif-with-css-earth-day-edition-1k6m <p><em>This is a submission for <a href="https://dev.to/devteam/join-us-for-the-next-frontend-challenge-earth-day-edition-52e4">Frontend Challenge v24.04.17</a>, Glam Up My Markup: Earth Day Celebration Landing Page</em></p> <p>Mainly I am not a participant of this Challenge, just did it for fun. The Credit for initial effort goes to <a class="mentioned-user" href="https://dev.to/arndom">@arndom</a> </p> <h2> <strong>Inspiration</strong> </h2> <p>When I saw the challenge I wanted to participate to improve my skills, and when I saw the GIF in the announcement post I knew what to attempt. I haven't done any "complex" animations with CSS alone, so this was the right time to try.</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffg270zm12dth1pdd24gk.gif" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffg270zm12dth1pdd24gk.gif" alt="Image description" width="498" height="373"></a></p> <h2> What I Built </h2> <p>Keeping in mind The above GIF, I created an animation of EARTH as in the GIF You can see the demo below</p> <h2> Demo </h2> <p><iframe height="600" src="https://codepen.io/BhalliBhai/embed/ZEZZqqd?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <blockquote> <p>It's doesn't loop, so click rerun↗️ to replay</p> </blockquote> <h2> Journey </h2> <p>Upon reading the announcement and seeing the GIF, I got the idea of an animation like this. I had to attempt a CSS recreation. It was unique, outside my comfort zone, and something worth doing and sharing.</p> <p>Working on it was both challenging and inspiring.<br> Happy coding :)</p> devchallenge frontendchallenge css javascript