Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create the Indian Flag Using HTML and CSS
To create the Indian flag using HTML and CSS, we will need to have good understanding of CSS. Indian flag have three colors: saffron, white and green and Ashoka Chakra at the middle.
In this article, we will be creating stepwise Indian flag. First making a pole then tricolor and then rotating Ashoka chakra all with the help of HTML and CSS only. Later we will be animating our flag with wave animation and flag movement. These are the steps which we will be following:
Steps to Create the Indian Flag Using HTML and CSS
We will be using following five steps to create the Indian flag which are mentioned below:
- Creating Basic Structure of Flag
- Designing Tricolor and Pole
- Adding Wheel and Spokes
- Adding Animation to Chakra
- Adding Animation to Flag
Creating Basic Structure of Flag
We have used following steps to create the structure of flag:
- We have used div element with container class which holds the pole and flag together.
- We have used div element to create pole and flag.
- We have used div element with wave class which is responsible for adding the animation.
- We have used wheel class with div to create the circle of chakra and used twelve span element which creates the twenty four spokes of the chakra.
Here is HTML implementation of above steps:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Create the Indian Flag using HTML and CSS
</title>
</head>
<body>
<div class="container">
<div class="pole"></div>
<div class="flag tricolor">
<div class="wave"></div>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</body>
</html>
Designing Tricolor and Pole
In this step we will be adding tricolor to the flag, and create pole attached to the flag.
- To design the pole, we have set it's dimension using CSS height and width property, and for curved ends we have used CSS border-top-left-radius, border-bottom-left-radius and border-bottom-right-radius properties and set it's color to black using background property.
- To design the flag, we have used flag class to set the dimensions, position and box-shadow.
- To add colors to flag, we have used tricolor class which uses linear-gradient to add saffron, white and green color to flag. It uses grid layout to keep it's child element i.e wheel, in center using place-items property.
Here is the CSS implementation of above steps:
.pole {
height: 450px;
width: 10px;
background: black;
border-top-left-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.flag {
position: relative;
width: 300px;
height: 200px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
overflow: hidden;
transform-origin: left center;
}
.tricolor {
background: linear-gradient(#ff9933 33%,
#fff 33%, #fff 66%, green 0);
display: grid;
place-items: center;
}
Adding Wheel and Spokes
In this step, We have used wheel and line class to design the Ashoka Chakra.
- We have used wheel class to create the wheel using border then used border-radius transforms the rectangular div into a circle.
- We have used line class to create the spokes and set the dimension of spokes.
- We have used nth-child() psuedo selector on line class which selects the child element specified in parameter and apply 15deg rotation using transform property.
- We have used nth-child() to select and apply rotation to twelve span elements creating twenty four spokes.
Here is the CSS implementation of above steps:
.wheel {
height: 50px;
width: 50px;
border: 1px solid darkblue;
border-radius: 50%;
position: relative;
margin: 0 auto;
}
.wheel .line {
height: 100%;
width: 1px;
display: inline-block;
position: absolute;
left: 50%;
background: darkblue;
}
.line:nth-child(1) {
transform: rotate(15deg)
}
.line:nth-child(2) {
transform: rotate(30deg)
}
.line:nth-child(3) {
transform: rotate(45deg)
}
.line:nth-child(4) {
transform: rotate(60deg)
}
.line:nth-child(5) {
transform: rotate(75deg)
}
.line:nth-child(6) {
transform: rotate(90deg)
}
.line:nth-child(7) {
transform: rotate(105deg)
}
.line:nth-child(8) {
transform: rotate(120deg)
}
.line:nth-child(9) {
transform: rotate(135deg)
}
.line:nth-child(10) {
transform: rotate(150deg)
}
.line:nth-child(11) {
transform: rotate(165deg)
}
.line:nth-child(12) {
transform: rotate(180deg)
}
Adding Animation to Chakra
In this step, we will be adding animation to Ashoka chakra, which add rotating animation to the chakra.
- We have used animation properties on wheel class which defines the animation-name, animation-timing-function, animation-duration and animation-iteration-count.
- CSS animation-name defines the animation name, control the animation speed using animation-duration, animation-iteration-count make sure animation runs infinitely.
- We have used @keyframes chakra which rotates the chakra from 0deg in begining to 360deg at the end of animation.
Here is the CSS implementation of above steps:
.wheel{
animation-name: chakra;
animation-timing-function: linear;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes chakra {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Adding Animation to Flag
In this step, we have applied animation to the flag.
- We have used animation properties in flag class to define an animation name wave.
- We have used @keyframes wave which is responsible for the movement of the flag in which perspective() property gives 3D depth and rotateY() is responsible for making the flag move by rotating it in y direction.
- We have used wave class to define the wavy animation of flag using linear-gradient gradient to set the angle of wave and animation properties to set the animation.
- We have used @keyframes waves which sets the of moving waves by moving the gradient stripes from -400px to 800px.
Here is the CSS implementation of above steps:
.flag{
animation-name: wave;
animation-timing-function: ease-in-out;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes wave {
0% {
transform: perspective(600px) rotateY(0deg);
}
25% {
transform: perspective(600px) rotateY(10deg);
}
50% {
transform: perspective(600px) rotateY(-10deg);
}
75% {
transform: perspective(600px) rotateY(10deg);
}
100% {
transform: perspective(600px) rotateY(0deg);
}
}
.wave {
position: absolute;
height: 100%;
width: 100%;
background-image: linear-gradient(45deg,
rgba(89, 72, 21, 0) 39%,
rgba(250, 245, 245, 0.8474025974025974) 46%,
rgba(89, 72, 21, 0) 53%);
animation-name: waves;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes waves {
0% {
background-position: -400px 0px,-400px 0px,
-400px 0px, -400px 0px;
}
100% {
background-position: 800px 0px,800px 0px,
800px 0px, 800px 0px;
}
}
Complete Example Code
Here is the complete example code to create the Indian flag using HTML and CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Create the Indian Flag using HTML and CSS
</title>
<style>
* {
box-sizing: border-box;
margin: 0;
}
body {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}
.container {
display: flex;
}
.pole {
height: 450px;
width: 10px;
background: black;
border-top-left-radius: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.flag {
position: relative;
width: 300px;
height: 200px;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
overflow: hidden;
transform-origin: left center;
animation-name: wave;
animation-timing-function: ease-in-out;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.tricolor {
background: linear-gradient(#ff9933 33%,
#fff 33%, #fff 66%, green 0);
display: grid;
place-items: center;
}
.wheel {
height: 50px;
width: 50px;
border: 1px solid darkblue;
border-radius: 50%;
position: relative;
margin: 0 auto;
animation-name: chakra;
animation-timing-function: linear;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.wheel .line {
height: 100%;
width: 1px;
display: inline-block;
position: absolute;
left: 50%;
background: darkblue;
}
@keyframes chakra {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes wave {
0% {
transform: perspective(600px) rotateY(0deg);
}
25% {
transform: perspective(600px) rotateY(10deg);
}
50% {
transform: perspective(600px) rotateY(-10deg);
}
75% {
transform: perspective(600px) rotateY(10deg);
}
100% {
transform: perspective(600px) rotateY(0deg);
}
}
.wave {
position: absolute;
height: 100%;
width: 100%;
background-image: linear-gradient(45deg,
rgba(89, 72, 21, 0) 39%,
rgba(250, 245, 245, 0.8474025974025974) 46%,
rgba(89, 72, 21, 0) 53%);
animation-name: waves;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes waves {
0% {
background-position: -400px 0px,-400px 0px,
-400px 0px, -400px 0px;
}
100% {
background-position: 800px 0px,800px 0px,
800px 0px, 800px 0px;
}
}
.line:nth-child(1) {
transform: rotate(15deg)
}
.line:nth-child(2) {
transform: rotate(30deg)
}
.line:nth-child(3) {
transform: rotate(45deg)
}
.line:nth-child(4) {
transform: rotate(60deg)
}
.line:nth-child(5) {
transform: rotate(75deg)
}
.line:nth-child(6) {
transform: rotate(90deg)
}
.line:nth-child(7) {
transform: rotate(105deg)
}
.line:nth-child(8) {
transform: rotate(120deg)
}
.line:nth-child(9) {
transform: rotate(135deg)
}
.line:nth-child(10) {
transform: rotate(150deg)
}
.line:nth-child(11) {
transform: rotate(165deg)
}
.line:nth-child(12) {
transform: rotate(180deg)
}
</style>
</head>
<body>
<div class="container">
<div class="pole"></div>
<div class="flag tricolor">
<div class="wave"></div>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</body>
</html>
Conclusion
We have learnt and understood how to create the Indian Flag using HTML and CSS. We have used five steps i.e creating basic structure of flag, designing tricolor and pole, adding wheel and spokes, adding animation to chakra and adding animation to flag. Using these five steps, we have created Indian flag with wavy animation.
Updated on: 2024-08-14T13:45:20+05:30
13K+ Views
