Featured Post
Krishna Janmasthami effect using HTML CSS
- Get link
- X
- Other Apps
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, andbox-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
- 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.
- 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.
- 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.
- 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!
- Get link
- X
- Other Apps
Comments
Post a Comment