Categories
Web development

3d CSS Birthday Cake and Candles Animation


3d CSS Birthday Cake and Candles Animation

To learn how to create the Birthday Cake and Candles Animation with HTML, CSS and jQuery follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div id="birthday-cake">
  <div class="cake">
    <div class="middle"></div>
    <div class="chocs"></div>
    <div class="top"></div>
  </div>
  <div class="candles">
    <div class="flame"></div>
    <div class="flame2"></div>
    <div class="flame3"></div>
    <div class="text">Happy Birthday!</div>
    <div class="shadows"></div>
  </div>
  <p class="text2">*click on the flame to blow candles</p>
</div>

Step2.

Add CSS

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

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

#birthday-cake {
  position: relative;
  top:50px;
  left:0;
}

Style the cake:

#birthday-cake:before {
  content:"";
  position: absolute;
  background-color: #ede0d4;
  width: 400px;
  height:140px;
  border-radius:50%;
  left:50%;
  top:50%;
  transform: translate(-50%,-10%);
  box-shadow: inset -2px -5px #e6ccb2;
}

.cake {
  position: absolute;
  background-color: #ddb892;
  width: 350px;
  height:130px;
  transform: translate(-50%,-60%);
}

.cake:before, .cake:after {
  content:"";
  position: absolute;
}

.cake:before, .middle, .middle:before {
  border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
  width:350px;
  height:50px;
}

.cake:before {
  background-color: #ddb892;
  top:130px;
}

.cake:after {
  background-color: #b08968;
  width:350px;
  height:30px;
  top:50px;
}

.middle {
  position: absolute;
  background-color: #b08968;
  top:80px;
  z-index:1;
}

.middle:before {
  content:"";
  position: absolute;
  background-color: #ddb892;
  top:-35px;
}

.top {
  position: absolute;
  background-color: #7f5539;
  width:350px;
  height: 90px;
  border-radius:50%;
  z-index:2;
  top:-45px;
  box-shadow: inset -5px -1px #fff, inset -70px 2px rgba(255,255,255,.1);
}

.chocs {
  position: absolute;
  width: 55px;
  height:50px;
  background-color: #7f5539;
  top:0;
  z-index:1;
  border-radius: 50% 50% 50% 50% / 0% 0% 100% 100%;
  box-shadow: 49px 20px #7f5539, 98px 25px #7f5539, 147px 30px #7f5539, 196px 25px #7f5539, 245px 20px #7f5539, 295px 0 #7f5539, 0px 4px #fff, 49px 24px #fff, 98px 29px #fff, 147px 34px #fff, 196px 29px #fff, 245px 24px #fff, 295px 4px #fff;
}

.chocs:before {
  content:"";
  position: absolute;
  width:175px;
  height:180px;
  background-color: rgba(255,255,255,.1);
  border-radius: 100% 0% 100% 0% / 0% 72% 28% 100%;
  left:175px;
  top:0;
}
CSS birthday cake

Style and animate candles:

.candles {
  position: absolute;
  width:30px;
  height: 80px;
  background-color: #0081a7;
  top:-160px;
  left:-20px;
  box-shadow: 50px 20px #0081a7, -50px 20px #0081a7;
}

.candles:before {
  content:"";
  position: absolute;
  width:30px;
  height: 10px;
  background-color: #0081a7;
  border-radius:50%;
  top:-5px;
  box-shadow: 0 80px #0081a7, -50px 20px #0081a7, -50px 100px #0081a7, 50px 20px #0081a7, 50px 100px #0081a7, inset 2px -1px #fff;
}

.candles:after {
  content:"";
  position: absolute;
  width:30px;
  height: 10px;
  border-radius:50%;
  top:15px;
  left:50px;
  box-shadow: inset 2px -1px #fff;
}

.shadows {
  position: absolute;
  width:30px;
  height: 10px;
  border-radius:50%;
  box-shadow: inset 2px -1px #fff;
  left:-50px;
  top:15px;
}

.shadows:before {
  content:"";
  position: absolute;
  background-color: #333;
  width:1.5px;
  height:15px;
  left:14.5px;
  top:-10px;
  box-shadow:50px -20px #333, 100px 0 #333;
}

.shadows:after {
  content:"";
  position: absolute;
  width:15px;
  height:90px;
  left:15px;
  background-color: rgba(255,255,255,.1);
  box-shadow: 50px -20px rgba(255,255,255,.1), 100px 0 rgba(255,255,255,.1);
  border-radius: 0% 100% 50% 50% / 100% 6% 10% 0%;
}


.flame, .flame:before, .flame2, .flame2:before, .flame3, .flame3:before {
  position: absolute;
  border-radius: 80% 15% 55% 50% / 55% 15% 80% 50%;
}

.flame,.flame3, .flame2 {
  cursor: pointer;
  width:30px;
  height: 30px;
  transform: rotate(-45deg);
  z-index:4;
  background-color: rgba(252,191,73,.8);
  transition: .5s;
  animation: flame .5s infinite;
}

.flame {
  top:-40px;
}

.flame2, .flame3 {
  top: -20px;
}

.flame2 {
  left:-50px;
}

.flame3 {
  left: 50px;
}

.flame:before, .flame2:before, .flame3:before {
  content:"";
  background-color: rgba(247,127,0,.4);
  width:20px;
  height:20px;
  top:5px;
  left:5px;
}

@keyframes flame {
  0%, 25%, 100% {transform: scaleY(1) rotate(-45deg);}
  50%, 75% {transform: scaleY(1.1) rotate(-45deg);}
}

Style text:

.text, .text2 {
  position: absolute;
  color: white;
  font-family: 'Brush Script MT', cursive;
  text-align: center;
}
.text {
  width:350px;
  font-size: 50px;
  left:-140px;
  top:100px;
  z-index:-1;
  transition: .3s;
  opacity:0;
}

.text2 {
  font-size: 25px;
  width: 300px;
  top:105px;
  left:-140px;
}

Step3.

Add jQuery

To read how to add the jQuery code to HTML click here. Add libraries below in to the <head> section.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

and then the following code:

<script>
$(document).ready(function() {
    $(".candles").click(function() {
        
      $(".flame").animate({"opacity": 0}, "fast");
      $(".flame2").animate({"opacity": 0}, "fast");
      $(".flame3").animate({"opacity": 0}, "fast");
      $(".text").animate({"top": -90, "opacity": 1}, "fast");
    });
});
</script>

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Coffee Express Animation

Birthday Cake – CSS Animation

CSS Door Animation (Open/Close on Hover)

Categories
Web development

CSS flip text effect / animation


CSS flip text effect / animation

To learn how to create the CSS flip text effect/animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

Create the text container and add characters:

<div class="flip-text">
  <div class="h">H</div>
  <div class="e">e</div>
  <div class="l">l</div>
  <div class="l-two">l</div>
  <div class="o">o</div>
  <div class="mark">,</div>
  <div class="w">W</div>
  <div class="o-two">o</div>
  <div class="r">r</div>
  <div class="l-three">l</div>
  <div class="d">d</div>
  <div class="mark-two">!</div>
</div>

Step2.

Add CSS

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

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

Style the characters:

.flip-text {
  position: relative;
  display: flex;
  font-size: 80px;
  color: #d9e5d6;
  font-family: arial;
  font-weight: 900;
  letter-spacing: -5px;
  text-shadow: 2px 2px 2px rgba(0,0,0,.3);
}

Animate characters:

@keyframes flip {
  0% {transform: rotateY(0) translateY(0)) scale(1,1);}
  10% {transform: rotateY(0) translateY(-30px) scale(.95,1.1);} 
  25% {transform: rotateY(90deg) translateY(0) scale(1.05,.95);}
  40% {transform: rotateY(0) translateY(0) scale(1,1);}
  100% {transform: rotateY(0) translateY(0) scale(1,1);}
}


.h, .e, .l, .l-two, .o, .mark, .w, .o-two, .r, .l-three, .d, .mark-two {
 animation: flip 1.7s ease-in-out infinite;
}

.e {
  animation-delay: .05s;
}

.l {
  animation-delay: .1s;
}

.l-two {
  animation-delay: .15s;
}

.o {
  animation-delay: .2s;
}

.mark {
  animation-delay: .25s;
}

.w {
  animation-delay: .3s;
}

.o-two {
  animation-delay: .35s;
}

.r {
  animation-delay: .4s;
}

.l-three {
  animation-delay: .45s;
}

.d {
  animation-delay: .5s;
}

.mark-two {
  animation-delay: .55s;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Slide Text Animation/ Sliding Text Effect

CSS Bouncing Text Animation

CSS Gradient Stroke Effect

Categories
Web development

Book Page Flip (CSS/ jQuery)

Book Page Flip (CSS/ jQuery)

To learn how to create the Book Page Flip using CSS and jQuery follow the steps below and watch the video tutorial.

Demo:

*to see the Book Page Flip (CSS/ jQuery) on the website click here.

Images used in the tutorial:

cookie
cookie.png
bowl
bowl.png

Step1.

Add HTML

<div class="recipe-book">
<div class="cookie-book">
    <div class="ongoing left sheet one"></div>
    <div class="ongoing right sheet two">Cookie Book</div>
</div>
<div class="controls">
    <button class="back"><</button>
    <button class="next">></button>
</div>
  </div>

Step2.

Add CSS

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

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

.recipe-book {
  position: relative;
  padding:10px;
  font-family: Trebuchet MS;
}

.cookie-book {
  width:500px;
  height:350px;
  position:relative;
  transform-style: preserve-3d;
  perspective:2000px;
  margin-bottom:15px;
  left:-25%;
}

Style the sheets:

.cookie-book .sheet {
  position:absolute;
  top:0;
  left:50%;
  width:50%;
  height:100%;
  transition: .7s;
  transform-style: preserve-3d;
  transform:rotateY(0deg);
  backface-visibility:hidden;
  z-index:1;
}

.cookie-book .sheet.left {
  left:0;
  transform-origin:right;
  border-radius: 5px 0 0 5px;
}

.cookie-book .sheet.right {
  left:50%;
  transform-origin:left;
  border-radius: 0 5px 5px 0;
}

.cookie-book .sheet.ongoing {
  z-index:2;
}

.cookie-book .ongoing.right.sheet.move {
  transform:rotateY(-165deg);
}
.cookie-book .ongoing.left.sheet.move {
  transform:rotateY(165deg);
}

.cookie-book .next.left.sheet {
  transform:rotateY(165deg);
}
.cookie-book .next.left.sheet.move {
  transform:rotateY(0deg);
}

.cookie-book .back.right.sheet {
  transform:rotateY(-165deg);
}

.cookie-book .back.right.sheet.move {
  transform:rotateY(0deg);
}

.cookie-book .sheet.one {
  background-color:transparent;
}

.cookie-book .sheet.two {
  background-color: #e63946;
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/12/cookie.png);
  background-size: 170px;
  background-repeat: no-repeat;
  background-position: center 80%;
  font-size: 60px;
  color: #333;
  text-align: center;
}

.cookie-book .sheet.three {
  background-color:#e9c46a; 
  box-shadow: inset -1px 0 rgba(0,0,0,.1);
  text-align: center;
  font-size: 20px;
  line-height:3;
}

.cookie-book .sheet.three:before {
  content:"Ingredients:";
  position: absolute;
  width:250px;
  text-align: center;
  left:0;
  top:75px;
}

.cookie-book .sheet.three:after {
  content:"150g butter, 1/2 cup brown sugar, 1 egg, 1 tsp vanilla extract, 1 3/4 cups flour, 1/2 cup milk chocolate bits, plus 1 tbsp extra";
  position: absolute;
  top:140px;
  width:250px;
  left:0;
  text-align: center;
  line-height: normal;
  font-size:17px;
}

.cookie-book .sheet.four {
  background-color:#e9c46a;
  box-shadow: inset 1px 0 15px rgba(0,0,0,.1);
  background-image: url(https://lenadesign.org/wp-content/uploads/2021/12/bowl.png);
  background-size: 180px;
  background-repeat: no-repeat;
  background-position: center 70%;
}

.cookie-book .sheet.four:before {
  content:"Preparation:";
  width: 250px;
  text-align:center;
  position: absolute;
  font-size: 20px;
  top:60px;
}

.cookie-book .sheet.five {
  background-color:#e9c46a; 
  box-shadow: inset -1px 0 rgba(0,0,0,.1);
}

.cookie-book .sheet.five:before {
  content:"Preheat oven to 175 degrees C.";
  position: absolute;
  width:200px;
  text-align: center;
  top:70px;
  left:25px;
}

.cookie-book .sheet.five:after {
  content:"Cream together the butter, white sugar, and brown sugar until smooth. Beat in the eggs one at a time, then stir in the vanilla. Bake for about 10 minutes in the preheated oven, or until edges are nicely browned.";
  position: absolute;
  width:200px;
  text-align: center;
  top:120px;
  left:25px;
}

.cookie-book .sheet.six {
  background-color:#e9c46a;
  box-shadow: inset 1px 0 15px rgba(0,0,0,.1);
}

.cookie-book .sheet.six:before {
  content:"Enjoy!";
  font-size: 50px;
  text-align: center;
  width: 250px;
  position: absolute;
  top:40%;
}

.controls {
  text-align:center;
  width:500px;
}
.controls button {
  font-size:20px;
  margin:0 5px;
  padding:5px 20px;
  border: none;
  background-color: #d3d3d3;
  transition: .3s;
  cursor: pointer;
}

.controls button:hover {
  background-color: #b1a7a6;
  color: white;
}

Step3.

Add jQuery

To read how to add the jQuery code to HTML click here.

let sheets = [
    { name: 'one'},
    { name: 'two', id: 'Cookie Book'},
    { name: 'three', id: 'Chocolate chip cookies:'},
    { name: 'four'},
    { name: 'five' },
    { name: 'six' },
];

let ongoingSheet = 0,
changing = false;

$('.controls button').click(function(){
	change($(this).prop('class'));
});

function change(flip) {
if (changing) return;
    
if (flip != 'next' && flip != 'back') return;  
let next_sheet = (flip == 'next'),
    	switch_left_data = next_sheet ? sheets[ongoingSheet + 2] : sheets[ongoingSheet - 2],
      switch_right_data = next_sheet ? sheets[ongoingSheet + 3] : sheets[ongoingSheet - 1];
    
if (!switch_left_data && !switch_right_data) return;
    
changing = true;
let $ong_left = $('.cookie-book .ongoing.left.sheet'),
    $ong_right = $('.cookie-book .ongoing.right.sheet'),
    $switch_left = $('<div class="left sheet ' + flip + '" />'),
    $switch_right = $('<div class="right sheet ' + flip + '" />');
    
    if (switch_left_data) {
        $switch_left.addClass(switch_left_data.name);
        $switch_left.html(switch_left_data.id);
    }
    
    if (switch_right_data) {
        $switch_right.addClass(switch_right_data.name); 
        $switch_right.html(switch_right_data.id);
    }  
    
    $('.cookie-book').prepend($switch_left);
    $('.cookie-book').prepend($switch_right);
    
    $ong_left.addClass('to_remove');
    $ong_right.addClass('to_remove');
    
    setTimeout(function(){
        if (next_sheet) {
            $ong_right.addClass('move');
            $switch_left.addClass('move');
        }
        else {
            $ong_left.addClass('move');
            $switch_right.addClass('move');
        }
        
        $switch_left.addClass('ongoing');
        $switch_right.addClass('ongoing');
        
    }, 100);
    
    setTimeout(function(){
        $('.cookie-book .sheet.to_remove').remove();
        $('.cookie-book .sheet').removeClass('move next back'); 
        changing = false;        
    }, 500);
    
    ongoingSheet = next_sheet ? (ongoingSheet + 2) : (ongoingSheet - 2);
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS 2 door Wardrobe (open/ close on hover)

Pure CSS Envelope (Open/Close on click)

CSS Door Animation (Open/Close on Hover)

Categories
Web development

CSS 2 door Wardrobe (open/ close on hover)

CSS 2 door Wardrobe (open/ close on hover)

To learn how to create the CSS 2 door Wardrobe (open/ close on hover) follow the steps below and watch the video tutorial.

Demo:

*to see the CSS 2 door Wardrobe (open/ close on hover) on the website click here.

Step1.

Add HTML

<div class="wardrobe">
  <div class="front">
  <div class="door"></div>
  <div class="second-door"></div>
    </div>
  <div class="inside">
    <div class="rail"></div>
    <div class="hangers"></div>
    <div class="boots"></div>
    <div class="scarf"></div>
  </div>
  <div class="shadow"></div>
</div>

Step2.

Add CSS

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

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

Style the wardrobe (inside):

.wardrobe {
  position: relative;
  width:200px;
  height:250px;
  background-color: #5c3b11;
  border:10px solid #b0712d;
  box-shadow: inset -5px 5px 25px rgba(0,0,0,0.5);
  transform-style: preserve-3d;
	transform: perspective(2500px);
  cursor: pointer;
}

.wardrobe:before {
  content:"";
  position: absolute;
  width: 20px;
  height:10px;
  background-color: #8a5924;
  top:260px;
  border-radius: 0 0 5px 5px;
  box-shadow: 180px 0 #8a5924;
}

.wardrobe:after {
  content:"";
  position: absolute;
  height:0;
  width:220px;
  border-bottom: 15px solid transparent;
  border-top: 15px solid #8a5924;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  top:-25px;
  left:-15px;
}

.insite {
  positon: absolute;
  top:0;
  left:0;
}

.rail {
  position: absolute;
  width:200px;
  height:8px;
  background-color: #d3cfc7;
  top:65px;
  box-shadow: inset 0 -3px rgba(0,0,0,0.3), 0 -20px #8a5924, 0 135px #8a5924;
}

.rail:before {
  content:"";
  position: absolute;
  width:70px;
  height:10px;
  border-radius:10px;
  background-color: #8cbf49;
  top:-30px;
  left:35px;
  box-shadow: 5px -10px white, 90px 0 #2a85ad, 90px -10px #e96c1a, 90px -20px #d095c0;
}

.rail:after {
  content:"";
  position: absolute;
  width:100px;
  height:30px;
  background-color: #97a4ad;
  box-shadow: inset 0 10px rgba(0,0,0,0.3);
  top:155px;
  left:3px;
}
CSS Wardrobe

Add some accessories:

.hangers {
  position: absolute;
  width:3px;
  height:20px;
  border-radius: 5px 5px 0 0;
  background-color: #6c757d;
  top:62px;
  left:20px;
  box-shadow: 15px 0 #6c757d, 35px 0 #6c757d, 55px 0 #6c757d, 80px 0 #6c757d, 95px 0 #6c757d;
}

.hangers:before {
  content:"";
  position: absolute;
  width:15px;
  height:100px;
  background-color: #d6b109;
  top:20px;
  left:-6px;
  border-radius:30% 30% 5px 5px;
  box-shadow: 15px 0 #60a6ab, 15px 10px #60a6ab, 35px 0 #80579b, 55px 0 #7ba53a, 55px 15px #d795c1, 80px 0 #cc0e2d, 95px 0 #fffaff;
}

.scarf {
  position: absolute;
  width: 25px;
  height: 60px;
  background-color: #a4161a;
  top:73px;
  left:160px;
}

.scarf:before {
  content:"";
  position: absolute;
  background-color: #ba181b;
  width:25px;
  height: 90px;
  top:-11px;
  left:-10px;
  border-radius:3px 3px 0 0;
}

.scarf:after {
  content:"";
  position: absolute;
  width:1px;
  height:10px;
  background-color: #ba181b;
  top:77px;
  left:-8px;
  box-shadow: 5px 0 #ba181b, 10px 0 #ba181b, 15px 0 #ba181b,20px 0 #ba181b,26px -19px #a4161a, 31px -19px #a4161a;
}

.inside:before {
  content:"";
  position: absolute;
  width:65px;
  height:30px;
  background-color: #738d51;
  box-shadow: inset 0 10px rgba(0,0,0,0.3);
  left:135px;
  top:170px;
}
CSS Wardrobe (open/ close)

Style the front part of the wardrobe (door):

.front {
  position: relative;
  z-index:1;
}

.door, .second-door {
  position: absolute;
  width: 100px;
  height: 250px;
  background-color: #8a5924;
  top:0;
  transition: .5s;
  z-index:5;
}

.door {
  transform-origin: left;
  box-shadow: inset 1px 0 10px rgba(0,0,0,0.3);
  left:0;
}

.door:before, .second-door:before {
  content:"";
  position: absolute;
  width:5px;
  height:20px;
  background-color: #333;
  border-radius:5px;
  top:115px;
}

.door:before {
  left:85px;
}

.second-door {
  left:100px;
  transform-origin: right;
  box-shadow: inset 1px 0 rgba(0,0,0,0.3), inset -1px 0 10px rgba(0,0,0,0.3);
}

.second-door:before {
  left:10px;
}

Add the shadow:

.shadow {
  position: absolute;
  background-color: rgba(0,0,0,0.3);
  width:220px;
  height:30px;
  border-radius:50%;
  top:260px;
  left:-10px;
  z-index:-1;
}
  
CSS Wardrobe (open and close on hover)

Add the hover effect to open and close the wardrobe:

.wardrobe:hover .door {
  transform: rotateY(-160deg);
}

.wardrobe:hover .door:before {
  display: none;
}

.wardrobe:hover .second-door {
  transform: rotateY(160deg);
}

.wardrobe:hover .second-door:before {
  display: none;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Door Animation (Open/Close on Hover)

CSS Christmas Card (Open/ Close on Click)

CSS Envelope (Open/Close on Hover)

Categories
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
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 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
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 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 defines at 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!

Read also:

CSS & jQuery 3d Cube

Roll the dice!

CSS Door Animation (Open/Close on Hover)