Categories
CSS Web development

CSS Ice cream

CSS Ice cream

Demo:

*to see the CSS Ice cream on the website click here.

What do you need to do?

To create the CSS Ice cream follow the steps below and watch the video tutorial:

  1. Add HTML
  2. Add CSS

Step1.

Add HTML

<div class="ice-cream">
  <div class="stick"></div>
  <div class="chocolate"></div>
</div>

Step2.

Add CSS

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

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

.ice-cream {
  position: relative;
  top:50px;
}

Style the ice cream:

.stick {
  position: relative;
  width:40px;
  height: 140px;
  border-radius:20px;
  background-color: #d4a276;
}

.stick:before {
  content:"";
  position: absolute;
  width:150px;
  height:200px;
  background-color: #fffcf2;
  border-radius:100px 100px 10px 10px;
  top:-130px;
  left:-55px;
}

.stick:after {
  position: absolute;
  content:"";
  width:40px;
  height: 20px;
  background-color: rgba(0,0,0,0.2);
  top:70px;
}

.chocolate {
  position: absolute;
  width: 161px;
  height: 140px;
  background-color: #583101;
  border-radius:100% 100% 0 0;
  top:-135px;
  left:-60.5px;
}

.chocolate:before {
  content:"";
  position: absolute;
  width: 23px;
  background-color: #583101;
  height:60px;
  border-radius:20px;
  top:120px;
  box-shadow: 23px 5px #fffcf2, 46px -10px #583101, 69px -5px #fffcf2, 92px -5px #583101, 115px 5px #fffcf2, 138px 5px #583101;
}

.chocolate:after {
  content:"";
  position: absolute;
  border-right: 5px solid rgba(255,255,255,0.5);
  border-top: 5px solid rgba(255,255,255,0.5);
  width:60px;
  height: 60px;
  border-top-right-radius: 100%;
  top:10px;
  left:85px;
}

Watch also the video tutorial:

Enjoy coding!