Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • An Animated Birthday Cake Using CSS3

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 4.22k
    Comment on it

    Hello, readers In today's blog I have tried to make An Animated Birthday Cake using animation, transform, keyframe and box-shadow properties of CSS3.

    In this example, Firstly I have created a div with the class name as cake for creating the image of a cake within this div I have created an another div with the class name as candles basically for displaying the candles over the cake.

    Below is the HTML code for the above example :-

    <!DOCTYPE html>
    
    <html>
    
    <head>
    
    <meta charset="utf-8">
    
    <link rel="stylesheet" type="text/css" href="css/style.css">
    
    </head>
    
    <body>
    
    <div class="container">
    
    <h1 class='title'>Happy birthday!</h1>
    
    <div class='cake'>
    
    <div class='candles'></div>
    
    </div>
    
    </div>
    
    </body>
    
    </html>

    In the CSS code where actually the work starts , Now for creating a rounded cake we will set the position to relative and need to set the border-radius, adjusting the height and width and had created a small border-bottom with a minimum thickness. I have also used pseudo-elements i.e before and after for creating it.

    Now for creating the front side circle of the cake , I have set the background color , border-bottom , border-radius and adjusted the height , position and z-index this all was styled in the cake:before element code.

     

    Now next below the front part ,  To create the  first layer for  I need to set the background-color, the border-radius , border-top-right and left radius to 25%. I have used box-shadow property for displaying the above layer by giving two colors to it and make its position to absolute. All the above code was written under cake:after pseudo-element.

     

    Now , I started to create candles which was needed to be placed above the front part of the cake . For creating the candle , firstly I have make a div with the class name as candle and had provided some style to it. As I  have also added a feature of animation to it as there would be glowing candles and would melt after some seconds and would again regain its original form .

     

    Now to create different colors of candles I used box-shadow property of CSS3 for styling it and have set the background-color to the candles and  the border-radius. I have also added the z-index , required width and sets its position to absolute.

    For creating the flames and giving style to the candles , I made the use of pseudo-elements i.e before and after . For making the above circle image of the candle I have set the border-radius , provided the background to the center candle . I used the box-shadow property for making the above circle of the remaining candles and made its position to absolute.

     

    Now for creating the animated flames over the candles I had provided an animation-duration and the iteration count . I need to set the background color of the flames and the border-radius with box-shadow property for displaying the shape of a flame . I need to make its position to absolute and adjusted its height and width as required.

    I have also used the keyframe a CSS3 property for creating candles and flame and provided transform rotate property to it at 0 and 100 %.

     

    Below is the CSS Code for the above example :-

    @-webkit-keyframes flames {
    
    0% {
    
    height: 2.2em;
    
    -webkit-transform: rotate(0.5deg);
    
    transform: rotate(0.5deg);
    
    opacity: 0.8;
    
    }
    
    100% {
    
    height: 2.5em;
    
    -webkit-transform: rotate(-0.5deg);
    
    transform: rotate(-0.5deg);
    
    border-radius: 50% / 30%;
    
    border-top-right-radius: 50% 60%;
    
    border-top-left-radius: 50% 60%;
    
    opacity: 1;
    
    }
    
    }
    
    @keyframes flames {
    
    0% {
    
    height: 2.2em;
    
    -webkit-transform: rotate(0.5deg);
    
    transform: rotate(0.5deg);
    
    opacity: 0.8;
    
    }
    
    100% {
    
    height: 2.5em;
    
    -webkit-transform: rotate(-0.5deg);
    
    transform: rotate(-0.5deg);
    
    border-radius: 50% / 30%;
    
    border-top-right-radius: 50% 60%;
    
    border-top-left-radius: 50% 60%;
    
    opacity: 1;
    
    }
    
    }
    
    @-webkit-keyframes candles {
    
    0% {
    
    height: 10em;
    
    border-radius: 50% / 5%;
    
    }
    
    100% {
    
    height: 2em;
    
    border-radius: 50% / 25%;
    
    }
    
    }
    
    @keyframes candles {
    
    0% {
    
    height: 10em;
    
    border-radius: 50% / 5%;
    
    }
    
    100% {
    
    height: 2em;
    
    border-radius: 50% / 25%;
    
    }
    
    }
    
    *,
    
    *::before,
    
    *::after {
    
    box-sizing: border-box;
    
    }
    
    
    
    body {
    
    background: #ffe0e5;
    
    color: #864313;
    
    font-size: 12px;
    
    }
    
    
    
    
    
    .title {
    
    text-align: center;
    
    font-size: 3em;
    
    }
    
    
    
    .cake {
    
    height: 30em;
    
    width: 30em;
    
    margin: 10em auto 0;
    
    position: relative;
    
    border-radius: 100% / 50%;
    
    background: #7b3d11;
    
    border-bottom: 0.25em solid #2d1606;
    
    }
    
    .cake::before {
    
    content: '';
    
    position: absolute;
    
    top: 0;
    
    left: 0;
    
    right: 0;
    
    bottom: 0;
    
    height: 15em;
    
    border-radius: 50%;
    
    background: #7b3d79;
    
    border-bottom: 0.5em solid #221105;
    
    z-index: 10;
    
    }
    
    .cake::after {
    
    content: '';
    
    position: absolute;
    
    top: 5em;
    
    left: 0;
    
    right: 0;
    
    bottom: 0;
    
    height: 15em;
    
    border-radius: 50%;
    
    border-top-right-radius: 25%;
    
    border-top-left-radius: 25%;
    
    background: #86437f;
    
    box-shadow: 0 5em 0 #fff, 0 10em 0 #86437e;;
    
    }
    
    
    
    .candles {
    
    z-index: 20;
    
    position: absolute;
    
    padding: 0;
    
    margin: 0;
    
    height: 10em;
    
    width: 2.5em;
    
    position: absolute;
    
    bottom: 22.5em;
    
    left: 0;
    
    right: 0;
    
    margin: 0 auto;
    
    border-radius: 50% / 5%;
    
    -webkit-animation: candles 10s 2s 2 alternate;
    
    animation: candles 10s 2s 2 alternate;
    
    background: #ffcc00;
    
    box-shadow: -3.5em 5em 0 0 #77DD77, 3.5em 5em 0 0 #FF6961, -7em -2.5em 0 -3px #FFB347, 7em -2.5em 0 -3px #779ECB, -10.5em 2em 0 -1px #B19CD9, 10.5em 2em 0 -1px #A5D3CA;
    
    }
    
    .candles::before {
    
    content: '';
    
    position: absolute;
    
    top: 0;
    
    left: 0;
    
    right: 0;
    
    bottom: 0;
    
    height: 10px;
    
    border-radius: 50%;
    
    background: #cca300;
    
    box-shadow: -3.5em 5em 0 0 #4ed34e, 3.5em 5em 0 0 #ff392e, -7em -2.5em 0 -3px #ff9e14, 7em -2.5em 0 -3px #5284bd, -10.5em 2em 0 -1px #9477cb, 10.5em 2em 0 -1px #83c2b6;
    
    }
    
    .candles::after {
    
    content: '';
    
    position: absolute;
    
    top: -2em;
    
    right: 0;
    
    left: 0;
    
    margin: auto;
    
    border-radius: 50% / 40%;
    
    border-top-right-radius: 50% 60%;
    
    border-top-left-radius: 50% 60%;
    
    background: #E29822;
    
    height: 2.5em;
    
    width: 1.5em;
    
    -webkit-animation: flames 0.75s infinite alternate;
    
    animation: flames 0.75s infinite alternate;
    
    box-shadow: 0 0 0 1px #e8ad4f, -3.5em 5em 1px 0 #E29822, 3.5em 5em 1px 0 #E29822, -7em -2.5em 1px 0 #E29822, 7em -2.5em 1px 0 #E29822, -10.5em 2em 1px 0 #E29822, 10.5em 2em 1px 0 #E29822;
    
    }

    Conclusion :-

    Hence, An Animated Birthday Cake has been created using CSS3 properties.

    Note:- The above code will run over all modern browsers such as on Firefox 7.0.1, Chrome 15.0, Internet Explorer 9.0 , Safari 5.1.1.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: