Categories
Web development

CSS Easter Bunny/ Foldable Easter Card


CSS Easter Bunny/ Foldable Easter Card

To learn how to create the CSS Easter Bunny/ Easter Card follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="easter-card">
  <div class="card-front">
    <div class="bottom"></div>
    <div class="easter-bunny">
      <div class="head"></div>
      <div class="ear-left"></div>
      <div class="ear-right"></div>
      <div class="paws"></div>
    </div>
  </div>
  <div class="card-inside">
    <div class="wishes">Just wanted to say a warm springtime hello and wish you a happy Easter!</div>
    <div class="easter-eggs">
      <div class="eggs"></div>
      <div class="basket"></div>
    </div>
  </div>
</div>

Step2.

Add CSS

Import the font:

Font source: Google Fonts

To read how to import the font in CSS click here.

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap');

Set the position and the colour of the background and elements:

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  font-family: 'Caveat', cursive;
  background-color: #b7b7a4;
}

.easter-card {
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
	transform: perspective(2000px);
  transition: .5s;
}

Create the card:

.card-front {
  position: relative;
  background-color: #e9dfd1;
  width: 300px;
  height:300px;
  transform-origin: left;
  transition: .5s;
  box-shadow: inset 30px 10px 100px rgba(0,0,0,.1), 0 0 50px rgba(0,0,0,.1);
}

.card-inside {
  position: absolute;
  background-color: #e9dfd1;
  width: 300px;
  height:300px;
  z-index:-2;
  left:0;
  top:0;
  box-shadow: inset 30px 10px 100px rgba(0,0,0,.1), 0 0 50px rgba(0,0,0,.1);
}

Make the card open/ close on hover:

.easter-card:hover {
	transform: perspective(2000px) rotate(2deg);
}

.easter-card:hover .card-front {
  transform: rotateY(-160deg); 
  box-shadow: 0 10px 100px rgba(0,0,0,.1);
}
CSS Foldable Easter Card

Style the front of the card:

.bottom {
  position: absolute;
  background-color: #e66d68;
  width:300px;
  height: 90px;
  bottom:0;
  z-index:7;
}

.easter-card:hover .bottom {
  display: none;
}

.bottom:before {
  content:"Happy Easter!";
  position: absolute;
  color: white;
  font-size: 35px;
  width:100%;
  text-align: center;
  top:22px;
}

.easter-card:hover .easter-bunny {
  display: none;
}

.easter-bunny {
  position: absolute;
}

.head {
  position: absolute;
  background-color: white;
  width:130px;
  height: 150px;
  border-radius:50%;
  top:130px;
  left:85px;
  z-index:5;
}

.head:before {
  position: absolute;
  content:"";
  background-color: #333;
  width:25px;
  height:25px;
  border-radius:50%;
  top:40px;
  left:30px;
  box-shadow: 45px 0 #333;
}

.head:after {
  content:"";
  position: absolute;
  background-color: white;
  border-radius:50%;
  width:10px;
  height: 10px;
  left:35px;
  top:50px;
  box-shadow: 45px 0 white;
}
.ear-left, .ear-right {
  position: absolute;
}

.ear-left:before, .ear-left:after, .ear-right:before, .ear-right:after {
  content:"";
  position: absolute;
  border-radius: 55% 45% 70% 30% / 30% 30% 70% 70%;
}

.ear-left:before, .ear-left:after {
  transform: rotate(-20deg);
}

.ear-right:before, .ear-right:after {
  transform: rotate(20deg);
}

.ear-left:before, .ear-right:before {
  height: 145px;
  width:35px;
  background-color: white;
  top:10px;
}

.ear-left:before {
  left:90px;
}

.ear-right:before {
  left:180px;
}

.ear-left:after, .ear-right:after {
  background-color: #f7d9d1;
  width:20px;
  height: 130px;
  top:27px;
  box-shadow: inset -3px -3px rgba(0,0,0,.1);
}

.ear-left:after {
  left:100px;
}

.ear-right:after {
  left:183px;
}

.paws {
  position: absolute;
  background-color: #f7d9d1;
  width: 25px;
  height:15px;
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  top:193px;
  left:137px;
  z-index:10;
  box-shadow: inset 0 -3px rgba(0,0,0,.1);
}

.paws:before, .paws:after {
  content:"";
  position: absolute;
  background-color: white;
  border-radius:50%;
  width:50px;
  height: 50px;
  box-shadow: inset -3px -3px rgba(0,0,0,.1);
  top:-10px;
}

.paws:before {
  left:-80px;
}

.paws:after {
  left:50px;
}
HTML & CSS Easter Bunny

Style the inside part of the card:

.wishes {
  font-size: 20px;
  width:200px;
  margin-left:50px;
  margin-top:50px;
  color: #333;
}

.wishes:before {
  content:"xxx";
  position: absolute;
  top:130px;
  left:200px;
}

.easter-eggs {
  position: absolute;
  background-color: #333;
  width:150px;
  height:3px;
  border-radius:10px;
  top:85%;
  left:25%;
}

.easter-eggs:before {
  content:"";
  position: absolute;
  border: 3px solid #333;
  background-color: #333;
  border-radius: 0 0 20px 20px;
  width: 60px;
  height: 30px;
  top:-33px;
  left:30%;
}

.easter-eggs:after {
  content:"";
  position: absolute;
  border: 3px solid #333;
  background-color: #e9dfd1;
  width:70px;
  height:3px;
  border-radius:10px;
  top:-39px;
  left:27%;
}

.basket {
  position: absolute;
  border-radius: 100px 100px 0 0;
  border: 3px solid #333;
  width:60px;
  height: 40px;
  top:-82px;
  left:30%;
}

.basket:before {
  content:"";
  position: absolute;
  background-color: #e9dfd1;
  border-radius:10px;
  width: 35px;
  height: 3px;
  top:50px;
  left:20px;
  box-shadow: -10px 10px #e9dfd1, -5px 20px #e9dfd1;
}

.basket:after {
  content:"";
  position: absolute;
  width: 1px;
  height: 0;
  border-bottom: 8px solid #333;
  border-top: 8px solid #333;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  transform: rotate(-90deg);
  top:-8px;
  left:23px;
}

.eggs, .eggs:before, .eggs:after {
  position: absolute;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  width:20px;
  height:25px;
  border: 3px solid #333;
  background-color: #e9dfd1;
}

.eggs {
  top:-52px;
  left:50px;
  z-index:-1;
}

.eggs:before {
  content:"";
  left:27px;
  top:-5px;
}

.eggs:after {
  content:"";
  left:14px;
  top:-10px;
}
CSS Easter Bunny

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Egg Shape and CSS Easter eggs

CSS Heart in Envelope

Pure CSS Train Animation

Categories
Web development

Horizontal and Vertical 3d Flip Box

Horizontal and Vertical 3d Flip Box

To learn how to create the 3d flip box follow the steps below:

Demo:

Side A

Flip Vertical

Side B

Side A

Flip Horizontal

Side B

Flip Vertical:

Step1.

Add HTML

Create the flip box:

<h3>Flip Vertical:</h3>
<div class="flip-box-v">
  <div class="flip-box-basev">
    <div class="flip-box-side-av">
      <h3>Side A</h3>
    </div>
    <div class="flip-box-side-bv">
      <h3>Side B</h3>
    </div>
  </div>
</div>

Step2.

Add CSS

.flip-box-v {
  background-color: transparent;
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

.flip-box-basev {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.7s;
  transform-style: preserve-3d;
}

.flip-box-v:hover .flip-box-basev {
  transform: rotateX(180deg);
}

.flip-box-side-av, .flip-box-side-bv {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-box-side-av {
  background-color: #2a9d8f;
  color: black;
}

.flip-box-side-bv {
  background-color: #e9c46a;
  color: black;
  transform: rotateX(180deg);
}

Output:

Flip Vertical:

Side A

Side B


Flip horizontal:

Step1.

Create the flip box:

Add HTML

<h3>Flip horizontal:</h3>
<div class="flip-box-h">
  <div class="flip-box-baseh">
    <div class="flip-box-side-ah">
      <h3>Side A</h3>
    </div>
    <div class="flip-box-side-bh">
      <h3>Side B</h3>
    </div>
  </div>
</div>

Step2.

Add CSS

.flip-box-h {
  background-color: transparent;
  width: 200px;
  height: 200px;
  perspective: 1000px;
}

.flip-box-baseh {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.7s;
  transform-style: preserve-3d;
}

.flip-box-h:hover .flip-box-baseh {
  transform: rotateY(180deg);
}

.flip-box-side-ah, .flip-box-side-bh{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-box-side-ah {
  background-color: #2a9d8f;
  color: black;
}

.flip-box-side-bh {
  background-color: #e9c46a;
  color: black;
  transform: rotateY(180deg);
}

Output:

Flip horizontal:

Side A

Side B


Enjoy coding!

Read also:

CSS 3D Transforms

CSS 3d flip Business Card

CSS Flip Postcard

Categories
Web development

CSS Flip Postcard

CSS Postcard

Demo:

*to see the CSS Flip Postcard on the website click here.

To create the CSS Flip Postcard follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

Create the postcard container, front-side and the back-side of the card:

<div class="post-card">
  <div class="post-card-inner">
    <div class="post-card-front">
      <div class="egypt">
        <div class="sky"></div>
        <div class="pyramids"></div>
        <div class="bottom">
          <div class="text">EGYPT</div>
        </div>
      </div>   
    </div>
    <div class="post-card-back">
      <div class="postCard">POSTCARD</div>
      <div class="address">
        <p class="name">John Doe</p>
        <p class="street">123 Oxford Street</p>
        <p class="city">123, London</p>
        <p class="country">United Kingdom</p>
      </div>
      <p class="greetings">Dear John,</br></br>
  WISH YOU </br>WERE HERE!</br>Lena, xxx </p>
      </div>    
    </div>
  </div>

Step2.

Add CSS

Set the colour and the position of the background and elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

Create the flip effect:

.post-card {
  background-color: transparent;
  width: 400px;
  height: 300px;
  perspective: 1000px;
}

.post-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2), 10px 18px 20px rgba(0,0,0,0.2);
}

.post-card:hover .post-card-inner {
  transform: rotateY(180deg);
}

.post-card-front, .post-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.post-card-front {
  background-color: #e9c46a;
  border: 10px solid #fff;
}
.post-card-back {
  background-color: #faedcd;
  border: 10px solid #faedcd;
  transform: rotateY(180deg);
  overflow: hidden;
}

Style the front side of the card:

.egypt {
  position: absolute;
  overflow:hidden;
  width: 400px;
  height: 300px;
}

.sky {
  position: absolute;
  border-radius:50%;
  background-color: #fefae0;
  width:100px;
  height:100px;
  top:30px;
  left:230px
}

.sky:before {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-left: 390px solid rgba(255,255,255,0.2);
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  left:-230px;
}

.sky:after {
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-bottom: 20px solid transparent;
  border-top: 20px solid transparent;
  border-right: 300px solid rgba(255,255,255,0.2);
  top:70px;
  left:-170px;
  transform: skew(45deg);
}

.pyramids {
  position: absolute;
  left:-25px;
  height:0;
  width:0;
  border-bottom: 200px solid #f4a261;
  border-right: 150px solid transparent;
  border-left: 150px solid transparent;
  top:90px;
}

.piramids:before {
  content:"";
  position: absolute;
  height:0;
  width:0;
  border-bottom: 200px solid rgba(0,0,0,0.2);
  border-right: 150px solid transparent;
}

.piramids:after {
  content:"";
  position: absolute;
  height:0;
  width:0;
  top:20px;
  border-bottom: 200px solid #e76f51;
  border-right: 150px solid transparent;
  border-left: 150px solid transparent;
}

.bottom {
  position: absolute;
  width: 400px;
  height:50px;
  background-color: #264653;
  top:250px;
}

.text {
  font-size:50px;
  color: white;
}

Style the backside of the card:

.postCard {
  margin-top:30px;
}

.postCard:before {
  content:"";
  position: absolute;
  width:3px;
  height:200px;
  background-color: #333;
  left:200px;
  top:70px;
}

.postCard:after {
  content:"";
  position: absolute;
  height:3px;
  width:150px;
  background-color: #333;
  top:150px;
  left:230px;
  box-shadow: 0 30px #333, 0 60px #333, 0 90px #333;
}

.address {
  position: relative;
  top:0;
}

.address:before {
  content:"";
  position: absolute;
  width: 60px;
  height: 70px;
  border: 5px solid #333;
  outline-style: dashed;
  outline-color: #333;
  background-color: #cb997e;
  top:-40px;
  left:320px;
}

.address:after {
  content:"";
  position: absolute;
  border-radius: 50%;
  border-style: dashed;
  width: 50px;
  height: 50px;
  top:10px;
  left:290px;
}

.name, .street, .city, .country, .greetings {
  font-family: 'Brush Script MT', cursive;
  font-size:20px;
  position: absolute;
}

.name {
  top:60px;
  left: 250px;
}

.street {
  top:90px;
  left: 250px;
}

.city {
  top:120px;
  left: 250px;
}

.country {
  top: 150px;
  left: 250px;
}

.greetings {
  left:40px;
  top:100px;
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Windmill Animation

CSS Plane Animation

CSS Train Animation

Categories
CSS Web development

CSS Folded Birthday Card

CSS Folded Greeting Card

Demo:

*to see the CSS Folded Card on the website click here.

To create the CSS Folded Birthday Card follow the steps below and watch the video tutorial:

Step1.

Add HTML

Front side of the card:

<div class="birthdayCard">
<div class="cardFront"><h3 class="happy">HAPPY BIRTHDAY!</h3>
<div class="balloons">
  <div class="balloonOne"></div>
  <div class="balloonTwo"></div>
  <div class="balloonThree"></div>
  <div class="balloonFour"></div>
</div>
</div>

Step2.

Add CSS

Set the colour and the position of the background and the elements:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height:100vh;
  background-color: #073b4c;
}

.birthdayCard {
  position: relative;
  width: 250px;
  height:350px;
  cursor: pointer;
  transform-style: preserve-3d;
	transform: perspective(2500px);
  transition: 1s;
}

Style front side of the card:

.cardFront {
  position: relative;
  background-color: #fff;
  width: 250px;
  height:350px;
  overflow: hidden;
  transform-origin: left;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.2), 30px 0 50px rgba(0,0,0,0.4);
  transition: .6s;
}

.happy {
  font-family: Tahoma, sans-serif;
  text-align: center;
  margin:30px; 
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  transition: .1s;
}

.balloons {
  position: absolute;
}

.balloonOne, .balloonTwo, .balloonThree, .balloonFour {
  position: absolute;
  width: 85px;
  height:95px;
  border-radius:50%;
}

.balloonOne {
  background-color: rgb(239, 71, 111, 0.7);
  left:-10px;
  top:50px;
}

.balloonTwo {
  background-color: rgb(6, 214, 160, 0.7);
  left:50px;
  top:20px;
}

.balloonThree {
  background-color: rgb(255, 209, 102, 0.7);
  left:110px;
  top:50px;
}

.balloonFour {
  background-color: rgb(17, 138, 178, 0.7);
  left:170px;
  top:20px;
}

.balloonOne:before, .balloonTwo:before, .balloonThree:before, .balloonFour:before {
  content:"";
  position: absolute;
  width:1px;
  height: 155px;
  background-color: #ffd166;
  top:95px;
  left:43px;
}

.balloonOne:after, .balloonTwo:after, .balloonThree:after, .balloonFour:after {
  content:"";
  position: absolute;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  top:94px;
  left:37px;
}

.balloonOne:after {
  border-bottom: 10px solid #ef476f;
}

.balloonTwo:after {
  border-bottom: 10px solid #06d6a0;
}

.balloonThree:after {
  border-bottom: 10px solid #ffd166;
}

.balloonFour:after {
  border-bottom: 10px solid #118ab2;
}

Step3.

Add HTML

To create the card inside:

 <div class="cardInside">
    <h3 class="back">HAPPY BIRTHDAY!</h3>
    <p>Dear Friend,</p>
    <p>Happy birthday!! I hope your day is filled with lots of love and laughter! May all of your birthday wishes come true.</p>
    <p class="name">xxx</p>
  </div>
</div>

Step4.

Add CSS

Style the card inside:

.cardInside {
  position: absolute;
  background-color: #fff;
  width: 250px;
  height:350px;
  z-index:-1;
  left:0;
  top:0;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
}

p {
  font-family: 'Brush Script MT', cursive;
  margin: 40px;
  color: #333;
}

.name {
  position: absolute;
  left:150px;
  top:200px;
  color: #333;
}

.back {
  font-family: Tahoma, sans-serif;
  color: #333;
  text-align: center;
  margin:30px; 
  outline-color:#333;
  outline-style: dotted;
}

Step5.

Add CSS Transitions

.birthdayCard:hover {
	transform: perspective(2500px) rotate(5deg);
	box-shadow: inset 100px 20px 100px rgba(0,0,0,.2), 0 10px 100px rgba(0,0,0,0.5);
}

.birthdayCard:hover .cardFront {
  transform: rotateY(-160deg); 
}

.birthdayCard:hover .happy {
  visibility:hidden; 
}

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Birthday Animation

Simple CSS Birthday Cake

Birthday Cake – CSS Animation

Categories
Web development

CSS 3D Transforms

CSS also supports 3D transformations by using the CSS transform property.

CSS 3d transforms

With the CSS transform property you can use the following 3D transformation methods:

  1. rotateX()
  2. rotateY()
  3. rotateZ()

Hover over the squares to see the effect:

RotateX
RotateY
RotateZ

RotateX()

The rotateX method rotates an element around its X-axis at a given degree:

<!DOCTYPE html>
<html>
<head>
<style>
.rotateX-example {
        display: flex;
    }
.n-div, .rotateX {
  width: 120px;
  height: 120px;
  background-color: #2a9d8f;
  margin:30px;
}

.rotateX {
  transform: rotateX(150deg);
}
</style>
</head>
<body>
    
<div class="rotateX-example">
<div class="n-div">
This a normal div element.</div>

<div class="rotateX">
This div element is rotated 150 degrees.
</div></div>

</body>
</html>

Output:

This a normal div element.
This div element is rotated 150 degrees.

RotateY()

The rotateY() method rotates an element around its Y-axis at a given degree:

<!DOCTYPE html>
<html>
<head>
<style>
.rotateY-example {
        display: flex;
    }
.n-div, .rotateY {
  width: 120px;
  height: 120px;
  background-color: #2a9d8f;
  margin:30px;
}

.rotateY {
  transform: rotateY(150deg);
}
</style>
</head>
<body>
    
<div class="rotateY-example">
<div class="n-div">
This a normal div element.</div>

<div class="rotateY">
This div element is rotated 150 degrees.
</div></div>

</body>
</html>

Output:

This a normal div element.
This div element is rotated 150 degrees.

RotateZ()

The rotateZ() method rotates an element around its Z-axis at a given degree:

<!DOCTYPE html>
<html>
<head>
<style>
.rotateZ-example {
        display: flex;
    }
.n-div, .rotateZ {
  width: 120px;
  height: 120px;
  background-color: #2a9d8f;
  margin:30px;
}

.rotateZ {
  transform: rotateZ(150deg);
}
</style>
</head>
<body>
    
<div class="rotateZ-example">
<div class="n-div">
This a normal div element.</div>

<div class="rotateZ">
This div element is rotated 150 degrees.
</div></div>

</body>
</html>

Output:

This a normal div element.
This div element is rotated 150 degrees.

Enjoy coding!

Read also:

CSS 2D Transforms

Pure CSS Envelope (Open/Close on click)

CSS Door Animation (Open/Close on Hover)