Codeer een ijsje

Jullie hebben het vast op elk medium al gehoord, en ja ook wij zullen het nog even melden! Vandaag wordt het rond de 29 graden! Heerlijk! Wij hadden trek in een ijsje en dat bracht ons op de gedachte om te laten zien hoe je een ijsje kan coderen.

HTML

Plak de onderstaande code in je tekst editor

<div class=”icecream”>
<div class=”ice”></div>
<div class=”dot”></div>
<div class=”dot”></div>
<div class=”dot”></div>
<div class=”waffle”></div>
</div>

CSS

/* resets */
*{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
*:before, *:after{
box-sizing: border-box;
}
html, body{
min-height: 100%;
}
body{
background-color: #81F4E1;
}
/* for the ice cream and shadow */
.icecream{
position: absolute;
width: 10vw;
height: 27.5vw;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.icecream:before{
content: “”;
position: absolute;
bottom: -5vw;
width: 10vw;
height: 2.5vw;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
-webkit-filter: blur(20px);
filter: blur(20px);
}
 
/* let’s make some strawberry ice cream */
.icecream .ice{
position: absolute;
background-color: #FF729F;
border-radius: 50%;
width: 10vw;
height: 10vw;
z-index: 0;
}
.icecream .dot{
position: absolute;
background-color: #FF729F;
border-radius: 50%;
width: 1.66667vw;
height: 1.66667vw;
top: 7.5vw;
transform: translateY(-50%);
z-index: 2;
}
.icecream .dot:nth-of-type(2){
left: 3.33333vw;
}
.icecream .dot:nth-of-type(3){
left: 6.66667vw;
}
.icecream .dot:before{
content: “”;
position: absolute;
left: 100%;
border-radius: 50%;
background-color: #FF729F;
width: 100%;
height: 100%;
}
/* for the cone */
.icecream .waffle{
position: absolute;
top: 7.5vw;
z-index: 1;
}
.icecream .waffle:before{
content: “”;
position: absolute;
border-top: 20vw solid #CF9950;
border-left: 5vw solid transparent;
border-right: 5vw solid transparent;
}

Leave a Reply