Category: CSS

3d CSS Birthday Cake and Candles Animation

Post author By Lena Stanley
Post date June 6, 2022

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

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)

Tags 3d, birthday, Cake, CSS, CSS animation, HTML

Web development

CSS Rainbow border/ button Animation

Post author By Lena Stanley
Post date May 31, 2022

To create the CSS Rainbow border/ button Animation follow the steps below and watch the video tutorial.

Demo:

*to see the animation on the website click here.

Step1.

Add HTML

<div class="button"></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;
  background-color: black;
}

Create the border and style the text:

.button {
  position: relative;
  width: 250px;
  height:100px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  cursor: pointer;
}

.button:before {
  content:"";
  position: absolute;
  width: 240px;
  height: 90px;
  background-color: black;
  top:5px;
  left:5px;
}

.button:after {
  content:"Hover Me";
  position: absolute;
  transform: translate(-50%,-50%);
  top:50%;
  left:50%;
  font-family: arial;
  font-weight: 900;
  font-size: 25px;
  background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

Animate the text and the border on hover:

@keyframes move {
	to {
		background-position: 2500vh;
	}
}

.button:hover {
  animation: move 30s linear infinite;
}

.button:hover:after {
  animation: move 29s linear infinite;
}

Watch also the video tutorial:

Enjoy coding!

Hey, here’s something that might interest you:

CSS Slide Text Animation/ Sliding Text Effect

CSS Typing Effect

CSS flip text effect / animation

Tags CSS, HTML, rainbow, rainbowtexteffect

Web development

CSS flip text effect / animation

Post author By Lena Stanley
Post date May 17, 2022

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

Tags 3d, CSS, flip, HTML, text

Web development

CSS min-height Property

Post author By Lena Stanley
Post date May 12, 2022

The CSS min-height property specifies the minimum height of an element.

The CSS min-height property prevents the value of the height property from becoming smaller than the min-height.

Syntax:

min-width: length;

length – specifies the height in px, %, etc (read also Units in CSS).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example-1, .example-2 {
  background-color: #e9c46a;  
}

.example-2 {
  min-height: 150px;
}
</style>
</head>
<body>

<h4>*no min-height specified</h4>
<p class="example-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

<h4>min-height: 150px:</h4>
<p class="example-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>

</body>
</html>

Output:

*no min-height specified

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit…

min-height: 150px:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit…

Enjoy coding!

Read also:

CSS min-width Property

CSS clear Property

CSS margin Property

Tags CSS, min-height

Web development

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.

max-height: 70px;

Enjoy coding!

Read also:

CSS max-width Property

CSS direction Property

CSS @import Rule

Tags CSS, max-height

Web development

CSS height Property

Post author By Lena Stanley
Post date May 12, 2022

The CSS height property settles the height of an element.

The CSS min-height and max-height properties override the width property.

Demo:

Click the “Try it” button to change the height of the DIV element:

Example

Note: the height of an element does not include margins, padding and borders.

Syntax:

height: auto|value;

auto (default) – the height is calculated by the browser.

value – specifies the width in px, %, etc (read also Units in CSS).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  height: 150px;
  width: 200px;
  border: 1px solid #333;  
}

.child {
  height: 50%;
  width: 50%;
  border: 1px solid red;  
}
</style>
</head>
<body>

<div class="parent">
  <div class="child">I'm the 50% height of my parent.</div>
</div>

</body>
</html>

Output:

I’m the 50% height of my parent.

Enjoy coding!

Read also:

CSS background Property

CSS caret-color Property

CSS filter Property

Tags CSS, height

Web development

CSS max-width Property

Post author By Lena Stanley
Post date May 3, 2022

The CSS max-width property specifies the maximum width of an element.

The CSS max-width property prevents the value of the width property from becoming larger than the max-width.

Syntax:

max-width: none|length;

none (default) – no maximum width specified.

length – specifies the width in px, %, etc (read also Units in CSS).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example1, .example2 {
  background-color: #fed9b7; 
  display: inline-block; 
}

.example2 {
  max-width: 50%;
}
</style>
</head>
<body>

<h4>max-width: none;</h4>
<span class="example1">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</span>

<h4>max-width: 50%;</h4>
<span class="example2">This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</span>

</body>
</html>

Output:

max-width: none;

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

max-width: 50%;

This is a paragraph.This is a paragraph. This is a paragraph. This is a paragraph.

Enjoy coding!

Read also:

CSS animation Property

CSS box-sizing Property

CSS clip-path Property

Tags CSS, max-width

Web development

CSS min-width Property

Post author By Lena Stanley
Post date May 2, 2022

The CSS min-width property specifies the minimum width of an element.

The CSS min-width property prevents the value of the width property from becoming smaller than the min-width.

Syntax:

min-width: length;

length – specifies the width in px, %, etc (read also Units in CSS).

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.example1, .example2 {
  background-color: #fed9b7; 
  display: inline-block; 
}

.example2 {
  min-width: 400px;
}
</style>
</head>
<body>

<h4>*no min-width specified</h4>
<span class="example1">This is a paragraph.</span>

<h4>min-width: 400px;</h4>
<span class="example2">This is a paragraph.</span>

</body>
</html>

Output:

*no min-width specified

This is a paragraph.

min-width: 400px;

This is a paragraph.

Enjoy coding!

Read also:

CSS align-self Property

CSS clear Property

CSS flex Property

Tags CSS, min-width

Web development

CSS width Property

Post author By Lena Stanley
Post date May 2, 2022

The CSS width property settles the width of an element.

The CSS min-width and max-width properties override the width property.

Demo:

Click the “Try it” button to change the width of the DIV element:

CSS width Property

Note: the width of an element does not include margins, padding and borders.

Syntax:

width: auto|value;

auto (default) – the width is calculated by the browser.

value – specifies the width in px, %, etc (read also Units in CSS).

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.example1 {
  width: auto;
  border: 1px solid #333;
}

.example2 {
  width: 100px;
  border: 1px solid #333;  
}

.example3 {
  width: 50%;
  border: 1px solid #333;  
}
</style>
</head>
<body>

<h4>width: auto;</h4>
<div class="example1">This is a paragraph.</div>

<h4>width: 100px;</h4>
<div class="example2">This is a paragraph.</div>

<h4>width: 50%;</h4>
<div class="example3">This is a paragraph.</div>

</body>
</html>

Output:

width: auto;

This is a paragraph.

width: 100px;

This is a paragraph.

width: 50%;

This is a paragraph.

Enjoy coding!

Read also:

CSS columns Property

CSS filter Property

CSS @keyframes Rule

Tags CSS, width

Web development

CSS direction Property

Post author By Lena Stanley
Post date April 28, 2022

The CSS direction property defines the text direction within a block-level element.

Demo:

Syntax:

direction: ltr|rtl;

ltr (default) – text direction goes from left-to-right.

rtl – text direction goes from right-to-left.

Example:

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

.example2 {
  direction: rtl;
}
</style>
</head>
<body>

<p>This text goes from left to right.</p>

<p class="example2">This text goes from right to left.</p>

</body>
</html>

Output:

This text goes from left to right.

This text goes from right to left.

Enjoy coding!

Read also:

CSS flex Property

CSS grid Property

CSS line-height Property

Tags CSS, direction, ltr, rtl

*no min-height specified

min-height: 150px:

max-height: none;

max-height: 70px;

Example

max-width: none;

max-width: 50%;

*no min-width specified

min-width: 400px;

width: auto;

width: 100px;

width: 50%;