Categories
CSS HTML Web development

HTML & CSS Folded Birthday Card

HTML birthday card

To learn how to create the HTML & CSS Folded Birthday Card follow the steps below and watch the video tutorial.

Demo:

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

Step1.

Add HTML

<div class="birthdayCard">
<div class="cardFront">
  <div class="front-text">
  <h3 class="happy">HAPPY</h3>
  <h2 class="bday">BIRTHDAY</h2> 
  <h3 class="toyou">to you!</h3>  
  </div>
  <div class="wrap-deco">
<div class="decorations"></div>
<div class="decorationsTwo"></div>
  </div> 
    <div class="wrap-decoTwo">
<div class="decorations"></div>
<div class="decorationsThree"></div>
  </div>
  <div class="plate">
    <div class="cake"></div>
    <div class="flame"></div>
  </div>
</div>  
  <div class="cardInside">
     <div class="inside-text">
  <h3 class="happy">HAPPY</h3>
  <h2 class="bday">BIRTHDAY</h2> 
  <h3 class="toyou">to you!</h3>  
  </div>
    <div class="wishes">
    <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>
</div>

Step2.

Add CSS

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

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

Create the card container:

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

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

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

.birthdayCard:hover .front-text {
  display: none;
}

.birthdayCard:hover .wrap-deco {
  display: none;
}

.birthdayCard:hover .wrap-decoTwo {
  display: none;
}

.birthdayCard:hover .plate {
  display: none;
}

Style the front 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,.13), 30px 0 50px rgba(0,0,0,0.1);
  transition: .4s;
}

.happy, .toyou {
  position: relative;
  font-family: didot;
  text-align: center;
  backface-visibility: hidden;
  font-size: 30px; 
}

.happy {
  top:198px;
}

.toyou {
  top:123px;
}

.bday {
  position: relative;
  font-family: arial;
  font-size: 35px;
  text-align: center;
  top:163px;
}

.wrap-deco {
  position: absolute;
  top:-230px;
  left:-200px;
}

.decorations {
  position: absolute;
  width: 400px;
  height: 300px;
  border: 3px solid #333;
  border-radius: 50%;
}

.decorations:before, .decorations:after, .decorationsTwo:before, .decorationsTwo:after, .decorationsThree:before, .decorationsThree:after {
  content:"";
  position: absolute;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  width:0;
  height:0;
}

.decorations:before {
  border-top: 40px solid #f15bb5;
  top:297px;
  left:210px;
  transform: rotate(-5deg);
}

.decorations:after{
  border-top: 40px solid #f4d35e;
  top:288px;
  left:260px;
  transform: rotate(-17deg);
}

.decorationsTwo:before {
  border-top: 40px solid #00f5d4;
  top:268px;
  left:315px;
  transform: rotate(-30deg);
}

.decorationsTwo:after, .decorationsThree:after {
  border-top: 40px solid #9b5de5;
  top:238px;
  left:355px;
  transform: rotate(-40deg);
}

.wrap-decoTwo {
  transform: scaleX(-1);
  position: absolute;
  top:-230px;
  left:445px; 
}

.decorationsThree:before {
  border-top: 40px solid #00bbf9;
  top:268px;
  left:315px;
  transform: rotate(-30deg);
}

.plate {
  position: absolute;
  width: 130px;
  height: 5px;
  background-color: #00bbf9;
  left:60px;
  top:213px;
}

.cake {
  position: absolute;
  overflow: hidden;
  width:100px;
  height: 50px;
  background-color: #f15bb5;
  border-radius: 10px 10px 0 0;
  top:-50px;
  left:15px;
  box-shadow: inset 0 -15px #f9c74f, inset 0 15px #432818;
}

.cake:before {
  content:"";
  position: absolute;
  background-color: #432818;
  width:10px;
  height:20px;
  top:5px;
  border-radius:20px;
  box-shadow: 10px 5px #f15bb5, 20px 0px #432818, 30px 2px #f15bb5, 40px 5px #432818, 50px 5px #f15bb5, 60px 0px #432818, 70px 5px #f15bb5, 80px 5px #432818, 90px 5px #f15bb5;
}

.plate:before {
  content:"";
  position: absolute;
  background: repeating-linear-gradient(-45deg, #9b5de5, #9b5de5 3px, #00f5d4 3px, #00f5d4 6px);
  width:7px;
  height: 25px;
  top:-75px;
  left:61px;
}

.plate:after {
  content:"";
  position: absolute;
  width:1px;
  height: 5px;
  background-color: #333;
  top:-80px;
  left:64px;
}


.flame {
  position: absolute;
  background-color: #fb5607;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  transform: rotate(-45deg);
  width:15px;
  height:15px;
  opacity:0.7;
  top:-93px;
  left:57px;
}
CSS birthday card front

Style the inside part of the card:

.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);
}

.inside-text {
  position: relative;
  top:-160px;
  transform: scale(0.7);
}

.wishes {
  position: relative;
  top:-100px;
  margin: 25px;
}

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

.name {
  margin-left:150px;
}
HTML & CSS folded birthday card

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS Folded Birthday Card

HTML & CSS Birthday Card

Pure CSS Envelope (Open/Close on click)

Categories
CSS HTML 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
CSS HTML Web development

CSS 3d flip Business Card

CSS  3d flip Business Card

Demo:

*to see the 3d flip Business Card on the website click here.

To create the CSS 3d flip Business Card follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

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

<div class="business-card">
  <div class="business-card-inner">
    <div class="business-card-front">
      <div class="laptop">
        <div class="keyboard">
          <div class="logo-text">Web Developer</div>
        </div>
      </div>
    </div>
    <div class="business-card-back">
      <div class="logo-left-side">
        <div class="text">Web Developer</div>
        <div class="mail">📧 example@gmail.com</div>
      </div>
    </div>
  </div>
</div>

Step2.

Add CSS

Set the colour and position of the background and elements:

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

.business-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 1000px;
  cursor: pointer;
}

Make the card flippable:

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

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

.business-card-front, .business-card-back {
  position: absolute;
  background-color: #0a9396;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
   display: flex;
  justify-content: center;
  align-items: center;
}

.business-card-back {
  transform: rotateY(180deg);
}

Style the front side of the card:

.laptop {
  position: relative;
  width:65px;
  height:50px;
  border: 3px solid #333;
  top:-45px;
}

.laptop:before {
  content:"jd";
  color: #333; 
  font-size: 30px;
  position: absolute;
  background-color: #e9d8a6;
  width:50px;
  height:35px;
  border: 3px solid #333;
  left:4.4px;
  top:4.4px;
}

.laptop:after {
  position: absolute;
  content:"";
  width:6px;
  height:4px;
  background-color: #0a9396;
  top:3.5px;
  left:40px;
  box-shadow: -45px 42.5px #0a9396, 23px -3.5px #0a9396;
}

.keyboard {
  position: relative;
  perspective: 200px;
  width: 20px;
  height:3px;
  background-color: #333;
  top:67px;
  left:22px;
}

.keyboard:before {
  position: absolute;
  content:"";
  border: 3.5px solid #333;
  width:72px;
  height: 25px;
  transform: rotateX(60deg);
  top:-17px;
  left:-28px;
}

.keyboard:after {
  content:"www.example.co.uk";
  position: absolute;
  font-family: tahoma;
  color: #333;
  top:65px;
  left:-62px;
}

.logo-text {
  color: #333;
  font-family: tahoma;
  width:150px;
  position: relative;
  top:12px;
  font-size:19px;
  left:-65px;
}

.logo-text:before {
  content:"John Doe";
  position: absolute;
  top:22px;
  font-size:16px;
  font-weight: bold;
  width:150px;
  left:0;
}
CSS  3d flip Business Card

Style the backside of the card:

.logo-left-side {
  position: relative;
  background-color: #333;
  width:2px;
  height:130px;
}

.logo-left-side:before {
  content:"jd";
  color: #333;
  font-size: 50px;
  position: absolute;
  left:-50px;
}

.logo-left-side:after {
  content:"John Doe";
  color: #333;
  font-size:20px;
  font-weight: bold;
  font-family: tahoma;
  left:-107px;
  position: absolute;
  width:100px;
  top:60px;
}

.text {
  position: relative;
  color: #333;
  font-family: tahoma;
  width:120px;
  left:-124px;
  top:90px;
}

.text:before {
  content:"☎ Phone: 123456789";
  position: absolute;
  left:110px;
  top:-85px;
  font-size:11px;
  width:150px;
}

.text:after {
  content:"🏢 Address: Oxford Street 123, London, United Kingdom";
  color: #333;
  left:130px;
  top:-60px;
  position: absolute;
  width:100px;
  font-size:11px;
}

.mail {
  position: relative;
  font-size: 11px;
  color: #333;
  font-family: tahoma;
  top:65px;
  width:150px;
  left:-7.5px;
}

.mail:before {
  content:"🌐 www.example.co.uk";
  color: #333;
  font-size:11px;
  font-family: tahoma;
  top:25px;
  position: absolute;
}
CSS  3d flip Business Card

Watch also the video tutorial:

Enjoy coding!

Read also:

CSS 3D Transforms

HTML & CSS Folded Birthday Card

CSS Flip Postcard

Categories
CSS JavaScript JQuery Web development

CSS Perspective Property, CSS Perspective-origin Property & 3d Cube

CSS Perspective property

Today we’ll talk about the CSS Perspective property, then we’ll go to the CSS Perspective-origin property and in the end, we’ll create the 3d cube using pure CSS.

  1. CSS Perspective property
  2. CSS Perspective-origin property
  3. 3d Cube

Click on/ drag to rotate the Cube:


1
6
4
3
5
2







CSS Perspective Property

The CSS perspective property is used to give a 3D-positioned element some perspective.

The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value.

When defining the perspective property property for an element, it is the CHILD elements that get the perspective view, NOT the element itself.

CSS Syntax:

perspective: length|none;

Where:

length– how far the element is placed from the view.

none– default value. Same as 0. The perspective is not set.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#el1 {
  position: relative;
  height: 100px;
  width: 100px;
  margin-left: 60px;
  border: 5px solid #2a9d8f;
  perspective: 100px;  
}
#el2, #el4 {
  padding: 35px;
  position: absolute;
  border: 5px solid #e76f51;
  background-color: #e9c46a; 
  transform-style: preserve-3d;
  transform: rotateX(45deg);
  opacity:0.5; 
}
#el3 {
  position: relative;
  height: 100px;
  width: 100px;
  margin-left: 60px;
  border: 5px solid #2a9d8f;
  perspective: none;
}
</style>
</head>
<body>

<h4>perspective: 100px:</h4>
<div id="el1">1
  <div id="el2">2</div>
</div>
<h4>perspective: none:</h4>
<div id="el3">3
  <div id="el4">4</div>
</div>
</body>

Output:

perspective: 100px:

1
2

perspective: none:

3
4

CSS Perspective-origin Property

The perspective-origin property property defines at from which position the user is looking at the 3D-positioned element.

When defining the perspective-origin property for an element, it is the CHILD elements that will get the effect, NOT the element itself.

CSS Syntax:

perspective-origin: x-axis y-axis;

Where:

x-axis – defining where the view is placed at the x-axis (left, center, right, length, %). Default value: 50%.

y-axis – defining where the view is placed at the y-axis (top, center, bottom, length, %). Default value: 50%.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#element1 {
  position: relative;
  height: 100px;
  width: 100px;
  margin-left: 150px;
  margin-top:30px;
  border: 5px solid #2a9d8f;
  perspective: 100px;
  perspective-origin: right;  
}
#element2, #element4, #element6 {
  padding: 50px;
  position: absolute;
  border: 5px solid #e76f51;
  background-color: #e9c46a; 
  opacity:0.5;
  transform-style: preserve-3d;
  transform: rotateX(45deg);
}
#element3 {
  position: relative;
  height: 100px;
  width: 100px;
  margin-left: 150px;
  margin-top:60px;
  border: 5px solid #2a9d8f;
  perspective: 150px;
  perspective-origin: top left;
}
#element5 {
  position: relative;
  height: 100px;
  width: 100px;
  margin-top:60px;
  margin-left: 150px;
  border: 5px solid #2a9d8f;
  perspective: 100px;
  perspective-origin: -80%;  
}
</style>
</head>
<body>
<h4>perspective-origin: right:</h4>
<div id="element1">1
  <div id="element2">2</div>
</div>
<h4>perspective-origin: top left:</h4>
<div id="element3">3
  <div id="element4">4</div>
</div>
<h4>perspective-origin: -80%:</h4>
<div id="element5">5
  <div id="element6">6</div>
</div>
</body>
</html>

Output:

perspective-origin: right:

1
2




perspective-origin: top left:

3
4




perspective-origin: -80%:

5
6




3d Cube

Using all knowledge from above we can create now a 3d cube.

We can create cubes setting different perspectives. In the first example, the CSS perspective property is set to 200px, in the second example 900px.

Example1:

Perspective: 200px;

<!DOCTYPE html>
<html>
<head>
<style>

.cube-content {
  perspective: 200px;
}

.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background-color: #e9c46a;
  color: #264653;
  opacity:0.5;
  border: 1px solid #264653;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
</style>
</head>
<body>

<div class="cube-content">
  <div class="cube">
  <div class="side front">1</div>
  <div class="side back">6</div>
  <div class="side right">4</div>
  <div class="side left">3</div>
  <div class="side top">5</div>
  <div class="side bottom">2</div>
  </div>
</div>

</body>
</html>

Output:

1
6
4
3
5
2




Example2:

Perspective: 900px:

<!DOCTYPE html>
<html>
<head>
<style>
.cube-container {
  perspective: 900px;
}

.cube {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(30deg);
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background-color: #e9c46a;
  opacity:0.5;
  border: 1px solid #264653;
  color: #264653;
  text-align: center;
  line-height: 2em;
}

.front {transform: translateZ(1em);}
.top {transform: rotateX(90deg) translateZ(1em);}
.right {transform: rotateY(90deg) translateZ(1em);}
.left {transform: rotateY(-90deg) translateZ(1em);}
.bottom {transform: rotateX(-90deg) translateZ(1em);}
.back {transform: rotateY(-180deg) translateZ(1em);}
</style>
</head>
<body>

<div class="cube-container">
  <div class="cube">
  <div class="side front">1</div>
  <div class="side back">6</div>
  <div class="side right">4</div>
  <div class="side left">3</div>
  <div class="side top">5</div>
  <div class="side bottom">2</div>
  </div>
</div>
</body>
</html>

Output:

1
6
4
3
5
2




Enjoy coding!