Featured Post

Ganesh Chaturthi Special: Ganesha Image with Rotating Chakra Structures | HTML & CSS Animation

Image
Ganesh Chaturthi Special: Ganesha Image with Rotating Chakra Structures | HTML & CSS Animation 🌟🕉️ In this project, we create a stunning web design that features a Ganesha image with a chakra-like structure as the background, using HTML and CSS. The chakra structures rotate both clockwise and counterclockwise, giving a mesmerizing effect, while shadow effects are applied to enhance the visual appeal. This design is perfect for celebrating Ganesh Chaturthi and showcasing beautiful animations with minimal effort.  VIDEO TUTORIAL   Key Features of This Design Ganesha Image with Indigo Background : The main focal point of the design is a beautiful image of Lord Ganesha set against an indigo-colored background. The indigo background provides a calming and divine feel, highlighting the spiritual significance of Lord Ganesha. Chakra-Like Rotating Structures : Behind the Ganesha image, we add three chakra-like structures, each rotating in opposite directions: clockwise and coun...

Krishna Janmasthami effect using HTML CSS

 

Krishna Janmasthami effect using HTML CSS

In this special Krishna Janmashtami tutorial, we'll be creating a beautiful animation featuring Lord Krishna, a pot, and a delightful splash effect using just HTML and CSS. This tutorial is perfect for those who want to blend creativity with coding, especially during festive occasions like Krishna Janmashtami.

What You'll Learn

In this tutorial, you'll learn how to create a visually appealing animation that captures the essence of Krishna Janmashtami. We'll animate Krishna playing with a pot, and you'll also see how to create a splash effect that adds a dynamic touch to the scene. This project is designed to be both fun and educational, making it a great way to practice your HTML and CSS skills while celebrating the festival.

Tech Stack Used

  • HTML: We'll use HTML to structure our page, including the elements that make up Krishna, the pot, and the splash effect. You'll see how to create a well-organized HTML structure that allows for easy styling and animation.
  • CSS: The core of our tutorial will focus on CSS, where we'll explore various properties and techniques to bring the animation to life. Key CSS features like @keyframes for animations, transform for positioning, and box-shadow for depth and effects will be covered. You'll also learn about CSS positioning and layering to ensure all elements are perfectly aligned.

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Krishna</title> <!-- extrenal stylesheet --> <link rel="stylesheet" href="style.css"> <!-- fonts --> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Serif:wght@300;400&display=swap" rel="stylesheet"> <!-- library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div id="text-bg"> <div class="text"> <h1>Happy <img src="assets/krishna.webp" alt="" class="animationtopbottom"></h1> <h2>Shri Krishna Janmasthami</h2> <small>May Krishna Blesses all the people</small> </div> </div> </body> </html>

CSS


* { margin: 0; font-family: 'IBM Plex Sans', serif; color: #fff; } body { width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: url(assets/bg.webp) no-repeat; background-size: cover; background-position: center; } body::before { content: ''; width: 100%; height: 100vh; left: 0; right: 0; position: absolute; background: url(assets/splash.webp) no-repeat; background-size: cover; background-position: center; mix-blend-mode: screen; } h1 { font-size: 100px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; animation: animationtopbottom 2s linear forwards; } h2 { font-size: 35px; animation: animationtopbottom 3s linear forwards; } h1 > img { width: 100%; max-width: 80px; } div#text-bg { max-width: 480px; } .animationtopbottom { animation: animationtopbottom 2s linear forwards; } @keyframes animationtopbottom { 0% { transform: translateY(-500%); } 100% { transform: translateY(0%); } }

Tutorial




How to Use This Tutorial

  1. Follow Along Step-by-Step: As you watch the video, follow along with the instructions. Each step is broken down into easy-to-follow segments, so whether you're a beginner or an experienced developer, you'll find it easy to keep up.
  2. Experiment with Styles: After completing the tutorial, feel free to experiment with different colors, sizes, and effects to personalize the animation. This is a great way to practice and enhance your understanding of CSS.
  3. Integrate into Your Projects: Once you've mastered the animation, consider integrating it into your own web projects, perhaps as a festive greeting or an interactive element on a webpage.
  4. Share Your Work: We'd love to see how you use this animation! Share your creations with us on LinkedIn or GitHub, and let's celebrate Krishna Janmashtami together with creativity and code.

Why This Tutorial?

This Krishna Janmashtami special is not just about creating an animation; it's about learning how to use web technologies in a creative way. By the end of this tutorial, you'll have a deeper understanding of how to animate elements in CSS and how to combine different CSS properties to achieve complex effects. You'll also gain confidence in your ability to create festive, themed animations that can be used in various projects.

Conclusion

Celebrate Krishna Janmashtami with code! Whether you're creating a special greeting, adding a festive touch to your website, or just having fun with animation, this tutorial will guide you every step of the way. Grab your HTML and CSS skills, and let's create something beautiful together.

Don't forget to subscribe to Logusivam Academy for more creative coding tutorials, and if you enjoyed this video, please like, share, and let us know your thoughts in the comments. Happy Krishna Janmashtami, and happy coding!

Comments

Popular Post

Hacker Login Form Using HTML CSS

Ganesh Chaturthi Special Design: Stunning HTML & CSS Animation Effects