Header Ads Widget

Diwali E-card with CSS

My codding spot November 05, 2021

 Nowadays E-card is used to send wishes. So  I tried to make Diwali  E-card  with just using HTML and CSS.

This post will describe that how to create animated Diwali card with Transition, Transform and Animation.

Diwali e-card using HTML and CSS
Diwali e-card using HTML and CSS 


So let’s create.

Structure of Diwali card with HTML 

This Diwali card is made of the <div> elements. The card has three layers front, inner and back.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<title>Diwali card</title>
<link rel="stylesheet" href="diwalicard.css">
</head>
<body>
<div class="card">
<!--Card front side-->
 <div class="front">
  <div class="sqr"></div>
  <h1>Happy Diwali</h1>
  <div class="fire"></div>
  <div class="pot"></div>
 </div>
<!--Card back side-->
 <div class="back">
 <p>My codding spot <br> Wishes you <br><span>Happy Diwali</span> <br> & <br><span>Happy New Year.</span></p>
 <div class="spin"></div>
 </div>
</div>
</body>
</html>


Each <div> elements contains class attribute which uniquely represents all the <div> elements. It is last layer of card. The .card class is parent class of all classes. .front class defines upper layer of Diwali card. The .sqr, .fire, .pot classes are defined under .front class.

.back class defines inner layer of card. .spin class is defined under .back class.

Styling Diwali e-card with CSS 

Design .card class

First we have to design .card class. It is simple. The animation effect apply to card border property. Using animation color of border changes into various colors.

Back layer

.card{
height:600px;
width:400px;
background-color:#ff3300;
border:5px ridge #00ff00;
animation-name:cardborder;
animation-duration:2s;
animation-timing-function:ease-in;
animation-iteration-count:infinite;
}
@keyframes cardborder{
0%{border-color:ffc400;}
50%{border-color:#0000ff;}
100%{border-color:#00ffee;}
}

Output
Diwali e-card design with HTML and CSS
Diwali e-card design with HTML and CSS 

In output text you can view the text. I want “Happy Diwali” to front page. So first I design card’s front page.

Design .front class.

At front page, I added dashed border and applied animation, too.  I create fire lamp image with .fire and .pot classes. The .sqr class is defined in background of <h1> element.

Front layer

.front
{
position:absolute;
height:550px;
width:350px;
background-color:#ff9900;
margin:20px;
border:5px dashed #ffcc00;
animation-duration:2s;
animation-timing-function:ease-in;
animation-iteration-count:infinite;
}
@keyframes borderchange
{
0%{border-color:#ff0000;}
50%{border-color:#00ff00;}
100%{border-color:#0000ff;}
}

Output


🪔.fire and .pot class design

To create fire and pot image border-radius property is applied to both classes. Make sure both position is absolute to set their top and left margins. Here animation effect applied to .fire class that gives little movements in fire and also change color of linear gradient.

.pot{
position:absolute;
margin-left:75px;
margin-top:450px;
height:100px;
width:200px;
background-color:#260e00;
border-radius:10px 10px 100px 100px;
box-shadow:5px 3px 10px #333;
}
.fire{
position:absolute;
margin-left:125px;
margin-top:350px;
height:100px;
width:100px;
border-radius:100px 0px 100px 0px;
background:linear-gradient(to left, #ff0033,#ff5511 50%);
transform:rotate(135deg);
box-shadow:-3px -3px 15px #333;
animation-name:movefire;
animation-duration:2s;
animation-timing-function:ease;
animation-iteration-count:infinite;
}
@keyframes movefire{
from{margin-left:127px;opacity:1;}
to{marhin-left:125px;opacity:0.6;}
}

.sqr class and <h1> element design

For .sqr class, animation applied to transform property. With use of both properties together <div> element rotated at specified angles. Text color of <h1> element also changes with element rotation.

.sqr{
position:absolute;
margin-top:45px;
margin-left:75px;
height:200px;
width:200px;
border-radius:0px 0px 0px 0px;
background-color:#1155ff;
transform:rotate(45deg);
animation-name:rotat;
animation-duration:3s;
animation-timing-function:linear;
animation-iteration-count:1;
animation-delay:1s;
}
@keyframes rotat{
0%{transform:rotate(45deg);}
30%{transform:rotate(-90deg);}
60%{transform:rotate(-180deg);}
100%{transform:rotate(360deg);}
}
h1{
position:absolute;
margin-left:70px;
margin-top:120px;
font-family:Times new roman,Times,serif;
color:#00ff00;
transform:rotate(0deg);
animation-name:color;
animation-duration:3s;
animation-timing-function:linear;
animation-iteration-count:1;
animation-delay:1s;;
}
@keyframes color{
0%{color:#ff0000;}
30%{color:#00ff00;}
60%{color:#f00000;}
100%{color:#00ffff;}
}

Output of front page of Diwali E-Card




.back class design

On .back class Happy Diwali and a New year wishes written in cursive. Inset outline applied to <p> element. It’s look like an box embedded in .back class. 
The “Happy Diwali and Happy New Year” putted in <span> tag to apply animation.

.spin class design

.spin class is design to rotate it around <p> element. For that animation applied to transform property and top and left margins.

Inner layer

.back{
position:absolute;
margin-left:40px;
margin-top:40px;
height:500px;
width:300px;
background-color:#ffbb88;
border:5px double #ffffff;
}
p{
margin-top:100px;
margin-left:75px;
height:300px;
width:140px;
padding:5px;
outline:3px inset #ffcc88;
border-radius:0px 30px 0px 30px;
background-color:#ffffff;
opacity:0.5;
text-align:center;
font-family:cursive;
font-size:24px;
font-weight:bold;
}
span{
color:#ffcc99;
animation-name:textcolor;
animation-duration:3s;
animation-timing-function:ease;
animation-delay:5s;
animation-iteration-count:infinite;
}
@keyframes textcolor{
to{color:#ff1199;font-size:34px;}
from{color:#55ff3e;font-size:24px;}
}
.spin{
margin-top:10px;
margin-left:10px;
height:50px;
width:50px;
background-color:#ff0000;
opacity:0.5;
border-radius:25px 0px 25px 0px;
transform:rotate(45deg);
animation-name:spinning;
animation-duration:3s;
animation-timing-function:linear;
animation-delay:5s;
animation-iteration-count:infinite;
}
@keyframes spinning{
0%{transform:rotate(360deg);margin-top:10px;margin-left:250px;}
30%{transform:rotate(-180deg);margin-top:-400px;margin-left:250px;}
60%{transform:rotate(280deg);margin-top:-400px;margin-left:10px;}
100%{transform:rotate(-360deg);margin-top:30px;margin-left:10px;}
}

Output of Diwali e-backcard design



Point to be noted during styling Diwali Card 

This is the separate outputs of front and inner layer. When both code combined this two layers are mixed with each other. Another question is that how to view the inner layer?

The solution is that to stop mixing both layers define z-index property to both classes (.front and .back classes). Assign 0 value to . back class and 1 value to .front class. So both layers are overlaps and th inner layer hide inside.

The z-index property is used to overlap the HTML elements. The value of z-index defines element’s order. (how they display on screen front, back, middle, etc..)

Now to view inner layer (.back) class. Define transform property’s skew method to .front class with transition effect.

.front{
....
transition:transform 3s;
...
z-index:1;
}
.front:hover{
transform:skewX(90deg);
}
.back {
....
z-index:0;
}

The final output of Diwali E-Card




Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments