Birthday Cake Recipe!

Birthday Cake Recipe!

DOWNLOAD THE START FILES

completed pen for coaches/reference

I’ve prepared the HTML elements for you so we can just dive straight into the fun stuff!

Start by giving the body of the page a nice background color so our cake looks more appetising.

In order to make the cake itself, we’re going to make use of the box shadow property. Because the box shadow property can accept a comma separated list of shadows, we can make the cakes layers without having to create and position multiple elements.

MORE INFO ABOUT BOX SHADOWS
 

Start by styling the initial oval that will make up the icing on our cake.

 
Make it a circle using border radius and choose what colour your icing’s going to be.

.cake {
  position: relative;
  top: 200px;
  margin: auto;
  width: 200px;
  height: 60px;
  background: #f2bbc5;
  border-radius: 100%;
}

We’re giving it relative positioning so that later on we have the control to absolutely position the plate in relation to it.
Here’s a reminder of relative and absolute positioning in case you need a refresher.

 

Screen-Shot-2017-02-11-at-17.17.13

 

Now to make the layers.

 
Add a box shadow to your cake.

 
box-shadow: 0px 4px 0px #f2bbc5;

The first number is the horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
 
The second number is the vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.
 
The third number is the blur radius, if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.
 
and the last bit is the colour!

save your work and have a look.

 
Now add another 19 box shadows, separated by commas. (you can copy and paste if you want)
We want all these shadows to line up under one another, so add another 4px to the vertical offset of each additional box shadow.
e.g.

 
box-shadow: 0px 4px 0px #f2bbc5,
            0px 8px 0px #f2bbc5,
            0px 12px 0px #f2bbc5, 
            0px 16px 0px #f2bbc5, 
            0px 20px 0px #f2bbc5, 
            0px 24px 0px #f2bbc5, 
            0px 28px 0px #f2bbc5;

If you have a look now, it should be resembling a cake a bit more! Change the hex codes to give the cake different layers.

 

The Plate

To create the plate, absolutely position another larger oval underneath the cake and give it a shadow too.
If you want to play around with the positioning or what the shadow or cake layers look like, it’s a good opportunity to get out the chrome inspector panel!

.plate {
  position: absolute;
  height: 90px;
  width: 300px;
  bottom:-95px;
  left: 50%;
  margin-left: -150px;
  border-radius: 100%;
  background: #fff;
  box-shadow: 0px 6px 0px #898989;
  z-index: -1;
}

 

The Candle

The candle’s going to be relatively positioned and centred in the same way as the cake.

.candle {
  position: relative;
  height: 50px;
  width: 12px;
  top: 230px;
  margin: auto;
  background-color: #ffffff;
  border-radius: 4px;
  z-index:10;
}

 

The Flame

 

We’re going to use a two value border radius on the individual corners of the flame to create the teardrop shape.
Have a look at the first set of diagrams in this article before moving on.

BORDER RADIUS


#flame {
   position: absolute;
   z-index: 10;
   background-color: #ffc950;
   width: 15px;
   height: 35px;
   top: -34px;
   margin: auto;
   border-top-left-radius: 10px 35px;    
   border-top-right-radius:  10px 35px;
   border-bottom-right-radius: 10px 10px;
   border-bottom-left-radius: 10px 10px;
}

Now that we’ve got a flame shape, add a box shadow and a blur to it to make it look a little more realistic. This box shadow is the same as before but needs a forth number, a spread radius to increase the size of the shadow, negative values decrease the size. Default is 0.

 box-shadow: 0 0 17px 7px rgba(244, 231, 112, 0.71);
 filter: blur(1px);

 

ADDING CSS ANIMATIONS

 

Why don’t we animate the flame too?

 

CSS3 ANIMATIONS

CSS3 animations allow you to change CSS properties.
To get the animation to work, we have to bind the animation to the element we want to move and specify @keyframes for the animation.
The keyframes hold what styles the element will have at different stages of the animation.
if you don’t specify a duration for the animation it won’t run as the default is 0.
Lets call our animation flicker and make it last 1 second. We want our animation to play infinitely too.

animation: flicker 1s ease-in-out alternate infinite;

Now for the keyframes!
We’re going to use transform:skewX to skew the flame slightly from side to side.

TRANSFORMS

@keyframes flicker {
  0% {
    transform: skewX(5deg);
  }
  
  25% {
    transform: skewX(-5deg);
  }
  
  50% {
    transform: skewX(10deg);
  }
  
  75% {
    transform: skewX(-10deg);
  }
  
  100% {
    transform: skewX(5deg);
  }
}

If you have a look at this you’ll see that the flame is rotating from the centre. This is the default. By changing the transform origin on the element we can change where the it is skewing or rotating from.

transform-origin: bottom;

Try adding variations on the box shadow into the keyframes to make the candle flame flicker.

 

Blow the Candle out with JS!

 

In order to make the candle “blow out” we’re going to create two different classes for the flame and toggle between them on the click event.
Add a class called lit to your flame in the html document and separate the styles for the flame into .lit


#flame {
   position: absolute;
   z-index: 10; 
}


.lit {
  background-color: #ffc950;
  width: 15px;
  height: 35px;
  filter: blur(1px);
  border-top-left-radius: 10px 35px;    
  border-top-right-radius:  10px 35px;
  border-bottom-right-radius: 10px 10px;
  border-bottom-left-radius: 10px 10px;
  top: -34px;
  margin: auto;
  box-shadow: 
    0 0 17px 7px rgba(244, 231, 112, 0.71); 
  transform-origin: bottom;
  animation: flicker 1s ease-in-out alternate infinite;
}

now create a class called out. We’re going to make a wick.


.out {
  background-color: #795548;
  width: 2px;
  height: 10px;
  top: -8px;
  left: 50%;
  margin-left: -1px;
}

In your javascript file start by adding a click event listener to the flame element,

Get element by ID

Add event listener

then using classList.toggle write a function called flameToggle to toggle the .lit class and the .out class

classlist.toggle


document.getElementById('flame').addEventListener('click', flameToggle);

function flameToggle() {
    this.classList.toggle('lit');
    this.classList.toggle('out');
}

You Might Also Like