
Demo:
What do you need to do?
To create the CSS Ice cream follow the steps below and watch the video tutorial:
- Add HTML
- 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!
Hey, here’s something that might interest you: