Cant get enough icecream in pure css3

Developer
Mikhail Korotkov
Size
4,322 Kb
Views
24,288
  1. Cant get enough icecream in pure css3 Previews
  2. Cant get enough icecream in pure css3 HTML Codes
  3. Cant get enough icecream in pure css3 CSS Codes

How do I make an cant get enough icecream in pure css3?

One icecream - one div (except fancy stick) i was looking for a wallpaper and found one "Sweet Season. Designed by Hiroaki Sho from Japan" in smashingmagazine's July compilation. the resolution there is bad. so i made a css version of it. What is a cant get enough icecream in pure css3? How do you make a cant get enough icecream in pure css3? This script and codes were developed by Mikhail Korotkov on 08 November 2022, Tuesday.

Cant get enough icecream in pure css3 Previews
IQ Test

Cant get enough icecream in pure css3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>cant get enough icecream in pure css3</title>	<meta name="author" content="Mikhail Korotkov">	<meta name="contact" content="[email protected]"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='icecream velvet'></div>
<div class='icecream threeInOne1'></div>
<div class='icecream chocolate'> <div class='fancy_stick'></div>
</div>
<div class='icecream threeInOne2'></div>
<div class='icecream chocolateWithStuff1'> <div class='Stuff1'></div> <div class='Stuff2'></div>
</div>
<div class='icecream lemon'></div>
<div class='icecream watermelon'></div>
<div class='icecream isThatPink'></div>
<div class='icecream PINK'></div>
<div class='icecream threeInOne3'></div>
<div class='icecream chocolateWithStuff2'> <div class='Things1'></div>
</div>
<div class='icecream poison'></div>
</body>
</html>

Cant get enough icecream in pure css3 - Script Codes CSS Codes

* {margin:0; padding:0;}
html {background: #ffe9d0;}
body {
background: none repeat scroll 0 0 black;
display: block;
margin: 0 auto;
min-width: 1070px;
position: relative;
width: 100px;
}
.icecream {margin: 50px 25px 100px; float: left; }
.fancy_stick:after {
background: none repeat scroll 0 0 #c4ad78;
border-bottom: 30px solid #c4ad78;
border-radius: 0 50px 50px 0 / 90px 110px 60px 20px;
content: "";
height: 50px;
left: 25px;
position: absolute;
width: 25px;
z-index: 99999;}
.fancy_stick {
background: none repeat scroll 0 0 #decba0;
border-bottom: 30px solid #decba0;
border-radius: 50px 0 0 50px / 110px 90px 20px 60px;
height: 50px;
left: 37px;
position: absolute;
top: 201px;
transform: rotate(0deg) skewX(4deg); -webkit-transform: rotate(0deg) skewX(4deg);; -moz-transform: rotate(0deg) skewX(4deg);; -ms-transform: rotate(0deg) skewX(4deg);; -o-transform: rotate(0deg) skewX(4deg);;
width: 25px;
z-index: 99999;
}
.Things1, .Stuff1, .Stuff2 {position: absolute; border-radius: 50%; z-index: 9999;}
.Things1 {height: 4px; width: 4px;/*yellow fff109 red d32600 dark 480900*/
box-shadow:
49px 3px 0 #dadada, 50px 21px 0 #dadada,
72px 42px 0 #dadada, 4px 26px 0 #fff,
26px 32px 0 #fff, 17px 12px 0 #fff,
4px 51px 0 #fff, 78px 11px 0 #dadada,
31px 53px 0 #fff,
28px 10px 0 #d32600, 65px 48px 0 #d32600,
36px 33px 0 #d32600, -2px 58px 0 #d32600,
95px 38px 0 #d32600, 75px 53px 0 #d32600,
48px -2px 0 #d32600, 37px 49px 0 #d32600,
71px 19px 0 #d32600, 37px 12px 0 #d32600,
35px 41px 0 #d32600, 63px 38px 0 #d32600,
25px 48px 0 #d32600, 44px 28px 0 #d32600,
83px 13px 0 #d32600, 17px 4px 0 #d32600,
65px 8px 0 #d32600, 85px 33px 0 #d32600,
75px 30px 0 #d32600, 29px 19px 0 #d32600,
15px 40px 0 #d32600, 12px 16px 0 #d32600,
4px 37px 0 #d32600, 45px 36px 0 #d32600,
45px 8px 0 #d32600, 15px 28px 0 #d32600,
55px 28px 0 #dbcf07, 48px 45px 0 #fff109,
82px 43px 0 #dbcf07, 2px 46px 0 #fff109,
28px 38px 0 #fff109, 58px -1px 0 #dbcf07,
77px 19px 0 #dbcf07, 62px 23px 0 #dbcf07,
8px 36px 0 #fff109, 52px 8px 0 #dbcf07,
38px 28px 0 #fff109, 88px 28px 0 #dbcf07,
26px 5px 0 #fff109, 15px 19px 0 #fff109,
87px 68px 0 #dbcf07, 35px 8px 0 #fff109,
59px 40px 0 #dbcf07, -2px 28px 0 #fff109,
18px 48px 0 #480900, 41px 47px 0 #480900,
80px 67px 0 #480900, 19px 57px 0 #480900,
9px 46px 0 #480900, 19px 36px 0 #480900,
15px 60px 0 #480900, 49px 52.1px 0 #480900,
9px 40px 0 #480900, 29px 47px 0 #480900,
19px 27px 0 #480900, 98px 57px 0 #480900,
8px 57px 0 #480900, 69px 47px 0 #480900,
59px 34px 0 #480900, 76px 48px 0 #480900,
88px 49px 0 #480900, -1px 68px 0 #480900,
69px 37px 0 #480900, 39px 57px 0 #480900,
59px 47px 0 #480900, 69px 57px 0 #480900,
20px 20px 0 #480900, 10px 30px 0 #480900,
5px 20px 0 #480900, 59px 9px 0 #480900,
40px 4px 0 #480900, 13px 11px 0 #480900,
23px 9px 0 #480900, 33px 37px 0 #480900,
80px 27px 0 #480900, 50px 28px 0 #480900,
40px 20px 0 #480900, -1px 40px 0 #480900,
72px 12px 0 #480900, 90px 40px 0 #480900,
65px 20px 0 #480900, 48px 15px 0 #480900,
30px -1px 0 #480900, 34px 16px 0 #480900,
80px 38px 0 #480900, 69px 30px 0 #480900,
29px 27px 0 #480900, 57px 20px 0 #480900,
70px 2px 0 #480900, 89px 20px 0 #480900
;}
.Stuff1 {width: 4px; height: 4px;
box-shadow: 20px -2px 0 #e5b977, 20px 1px 0 #562e0b,	-2px 18px 0 #e5b977, 0px 19px 0 #562e0b,	14px 22px 0 #e5b977, 15px 25px 0 #562e0b,	40px 0px 0 #b6915b, 34px 14px 0 #e5b977,	48px 22px 0 #b6915b, 46px 10px 0 #b6915b,	43px 63px 0 #b6915b, 30px 33px 0 #b6915b,	47px 58px 0 #b6915b, 33px 97px 0 #b6915b,	43px 78px 0 #b6915b, 53px 88px 0 #b6915b,	39px 128px 0 #b6915b,	12px 74px 0 #e5b977, 13px 77px 0 #562e0b,	17px 67px 0 #e5b977, 18px 70px 0 #562e0b,	-2px 67px 0 #e5b977, 0px 69px 0 #562e0b,	-1px 153px 0 #e5b977, 3px 155px 0 #562e0b,	7px 142px 0 #e5b977, 10px 145px 0 #562e0b,	15px 148px 0 #e5b977, 17px 151px 0 #562e0b,	20px 116px 0 #e5b977, 23px 116px 0 #562e0b,	25px 160px 0 #e5b977, 28px 163px 0 #562e0b,	8px 104px 0 #e5b977, 11px 107px 0 #562e0b;
}
.Stuff2 {width: 5px; height: 5px;
box-shadow: 43px 144px 0 #b6915b, 30px 152px 0 #e5b977,	40px 169px 0 #b6915b,44px 122px 0 #b6915b,	26px 112px 0 #e5b977, 18px 11px 0 #e5b977,	19px 13px 0 #562e0b, 36px 79px 0 #b6915b,	31px 72px 0 #b6915b, 41px 42px 0 #b6915b,	16px 45px 0 #e5b977, 19px 47px 0 #562e0b,	6px 161px 0 #e5b977, 8px 163px 0 #562e0b,	10px 94px 0 #e5b977, 12px 96px 0 #562e0b,	12px 134px 0 #e5b977, 14px 136px 0 #562e0b,	43px 144px 0 #b6915b, 45px 146px 0 #562e0b;
}
/*--------------------------------------------------*/
.velvet:before {
background: none repeat scroll 0 0 #decba0;
border-radius: 0 0 50px 50px;
box-shadow: -10px 9px 0 #c4ad78 inset, 0 12px 0 #c4ad78 inset;
content: "";
height: 111px;
left: 49px;
margin: auto;
position: absolute;
top: 168px;
width: 20px;
z-index: -666;
}
.velvet:after {
background: none repeat scroll 0 0 #e60000;
border-radius: 70px 0 0 15px;
content: "";
float: right;
height: 167px;
position: absolute;
width: 58px;
}
.velvet {
background: none repeat scroll 0 0 #c30e0a;
border-radius: 70px 70px 15px 15px;
box-shadow: 0 6px 0 #c30e0a;
height: 167px;
position: relative;
width: 120px;
}
/*--------------------------------------------------*/
.threeInOne1:before {
background: none repeat scroll 0 0 #decba0;
border-radius: 0 0 50px 50px;
box-shadow: -10px 9px 0 #c4ad78 inset, 0 12px 0 #c4ad78 inset;
content: "";
height: 98px;
left: 41px;
margin: auto;
position: absolute;
top: 120px;
width: 20px;
z-index: -666;
}
.threeInOne1:after {
background: none repeat scroll 0 0 #dce9d7;
border-bottom: 59px solid #e3775d;
border-radius: 15px 0 0 15px;
border-top: 59px solid #f1d700;
content: "";
float: right;
height: 59px;
position: absolute;
top: -59px;
width: 50px;
}
.threeInOne1 {
background: none repeat scroll 0 0 #acdb9a;
border-bottom: 59px solid #da4825;
border-radius: 15px;
border-top: 59px solid #f1b600;
box-shadow: 0 6px 0 #da4825, 50px 0 0 #dce9d7 inset;
height: 59px;
position: relative;
width: 100px;
margin-left:35px;
margin-right:35px;
}
/*--------------------------------------------------*/
.chocolate:before {
background: none repeat scroll 0 0 #65230e;
border-radius: 22px 41px 52px 3px;
box-shadow: 0 6px 0 #65230e, 6px 0 0 #8c3c22 inset;
content: "";
float: right;
height: 169px;
left: 45px;
position: absolute;
transform: rotate(0deg) skewX(8deg); -webkit-transform: rotate(0deg) skewX(8deg); -moz-transform: rotate(0deg) skewX(8deg); -ms-transform: rotate(0deg) skewX(8deg); -o-transform: rotate(0deg) skewX(8deg);
width: 60px;
}
.chocolate:after {
background: none repeat scroll 0 0 #decba0;
border-radius: 0 0 50px 50px;
box-shadow: 0 8px 0 #65230e inset, -10px 9px 0 #c4ad78 inset, 10px -107px 0 #65230e, 10px -174px 0 #65230e, -10px -113px 0 #8c3c22, -10px -173px 0 #8c3c22;
content: "";
height: 107px;
left: 51px;
margin: auto;
position: absolute;
top: 175px;
transform: rotate(0deg) skewX(4deg); -webkit-transform: rotate(0deg) skewX(4deg); -moz-transform: rotate(0deg) skewX(4deg); -ms-transform: rotate(0deg) skewX(4deg); -o-transform: rotate(0deg) skewX(4deg);
width: 20px;
}
.chocolate {
background: none repeat scroll 0 0 #8c3c22;
border-radius: 39px 5px 0 50px;
box-shadow: 0 6px 0 #65230e;
content: "";
height: 169px;
left: -20px;
margin-left: 55px;
margin-right: 85px;
position: relative;
transform: rotate(0deg) skewX(-4deg); -webkit-transform: rotate(0deg) skewX(-4deg); -moz-transform: rotate(0deg) skewX(-4deg); -ms-transform: rotate(0deg) skewX(-4deg); -o-transform: rotate(0deg) skewX(-4deg); transform: rotate(0deg) skewX(-4deg);
width: 60px;
z-index: 666;
}
/*--------------------------------------------------*/
.threeInOne2:before {
background: none repeat scroll 0 0 #decba0;
border-radius: 0 0 50px 50px;
box-shadow: -10px 9px 0 #c4ad78 inset, 0 12px 0 #c4ad78 inset;
content: "";
height: 98px;
left: -10px;
margin: auto;
position: absolute;
top: 121px;
width: 20px;
z-index: -666;
}
.threeInOne2:after {
background: none repeat scroll 0 0 #ab7f90;
border-bottom: 59px solid #fec95d;
border-radius: 58px 0 0 58px;
border-top: 59px solid #d7de9b;
box-shadow: 0 6px 0 #d07c46;
content: "";
float: right;
height: 59px;
left: -60px;
position: absolute;
top: -59px;
width: 60px;
}
.threeInOne2 {
background: none repeat scroll 0 0 #724858;
border-bottom: 59px solid #d07c46;
border-radius: 0 58px 58px 0;
border-top: 59px solid #b8c06f;
box-shadow: 0 6px 0 #d07c46;
height: 59px;
left: 41px;
margin-right: 75px;
position: relative;
width: 60px;
}
/*--------------------------------------------------*/
.chocolateWithStuff1:before {
background: none repeat scroll 0 0 #decba0;
border-radius: 0 0 50px 50px;
box-shadow: 0 9px 0 #4a2200 inset, -10px 9px 0 #c4ad78 inset;
content: "";
height: 98px;
left: 18px;
margin: auto;
position: absolute;
top: 182px;
width: 20px;
z-index: -666;
}
.chocolateWithStuff1:after {
background: none repeat scroll 0 0 #734d30;
border-radius: 13px 0 0 13px;
content: "";
float: right;
height: 177px;
position: absolute;
width: 28px;
}
.chocolateWithStuff1 {
background: none repeat scroll 0 0 #4a2200;
border-radius: 13px;
box-shadow: 0 6px 0 #4a2200;
height: 177px;
position: relative;
width: 56px;
margin-left: 54px;
}
/*--------------------------------------------------*/
.lemon:before {
background: none repeat scroll 0 0 #decba0;
border-radius: 0 0 50px 50px;
box-shadow: -10px 9px 0 #c4ad78 inset, 0 12px 0 #c4ad78 inset;
content: "";
height: 98px;
left: 26px;
margin: auto;
position: absolute;
top: 177px;
width: 20px;
z-index: -666;
}
.lemon:after {
background: none repeat scroll 0 0 #f0d879;
border-radius: 50px 0 0 25px;
content: "";
float: right;
height: 177px;
position: absolute;
width: 35px;
}
.lemon {
background: none repeat scroll 0 0 #ecc62e;
border-radius: 50px 50px 25px 25px;
box-shadow: 0 6px 0 #ecc62e;
height: 177px;
position: relative;
margin-left: 91px;
width: 70px;
}
/*--------------------------------------------------*/
.watermelon:before {
background: none repeat scroll 0 0 #decba0;
border-radius: 0 0 50px 50px;
box-shadow: -10px 9px 0 #c4ad78 inset, 0 12px 0 #c4ad78 inset;
content: "";
height: 98px;
left: 49px;
margin: auto;
position: absolute;
top: 177px;
width: 20px;
z-index: -666;
}
.watermelon:after {
background: none repeat scroll 0 0 #d7de9b;
border-radius: 100% 0 0 100% / 50%;
content: "";
float: right;
height: 177px;
position: absolute;
width: 60px;
}
.watermelon {
background: none repeat scroll 0 0 #b8c06f;
border-radius: 50%;
box-shadow: 0 6px 0 #b8c06f;
height: 177px;
position: relative;
width: 120px; clear: both;
}
/*--------------------------------------------------*/
.isThatPink:before {
background: none repeat scroll 0 0 #decba0;
border-radius: 0 0 50px 50px;
box-shadow: -10px 9px 0 #c4ad78 inset;
content: "";
height: 98px;
left: 18px;
margin: auto;
position: absolute;
top: 182px;
width: 20px;
z-index: -666;
}
.isThatPink:after {
background: none repeat scroll 0 0 #ff9ccd;
border-radius: 13px 0 0 13px;
content: "";
float: right;
height: 177px;
position: absolute;
width: 28px;
}
.isThatPink {
background: none repeat scroll 0 0 #ff66b2;
border-radius: 13px;
box-shadow: 0 6px 0 #ff66b2;
height: 177px;
margin-left: 57px;
position: relative;
width: 56px;
}
/*--------------------------------------------------*/
.PINK:before {
background: none repeat scroll 0 0 #decba0;
border-radius: 0 0 50px 50px;
box-shadow: -10px 9px 0 #c4ad78 inset, 0 12px 0 #c4ad78 inset;
content: "";
height: 98px;
left: 26px;
margin: auto;
position: absolute;
top: 177px;
width: 20px;
z-index: -666;
}
.PINK:after {
background: none repeat scroll 0 0 #f08f90;
border-radius: 50px 0 0 25px;
content: "";
float: right;
height: 177px;
position: absolute;
width: 35px;
}
.PINK {
background: none repeat scroll 0 0 #fa7480;
border-radius: 50px 50px 25px 25px;
box-shadow: 0 6px 0 #fa7480;
height: 177px;
position: relative;
width: 70px;
margin-left: 82px;
}
/*--------------------------------------------------*/
.threeInOne3:before {
background: none repeat scroll 0 0 #decba0;
border-radius: 0 0 50px 50px;
box-shadow: -10px 9px 0 #c4ad78 inset, 0 12px 0 #c4ad78 inset;
content: "";
height: 98px;
left: 41px;
margin: auto;
position: absolute;
top: 120px;
width: 20px;
z-index: -666;
}
.threeInOne3:after {
background: none repeat scroll 0 0 #fefac4;
border-bottom: 59px solid #c6f5f0;
border-radius: 15px 0 0 15px;
border-top: 59px solid #f1d700;
content: "";
float: right;
height: 59px;
position: absolute;
top: -59px;
width: 50px;
}
.threeInOne3 {
background: none repeat scroll 0 0 #f0e397;
border-bottom: 59px solid #9ff0e8;
border-radius: 15px;
border-top: 59px solid #f1b600;
box-shadow: 0 6px 0 #9ff0e8, 50px 0 0 #dce9d7 inset;
height: 59px;
margin-left: 71px;
position: relative;
width: 100px;
}
/*--------------------------------------------------*/
.chocolateWithStuff2:before {
background: none repeat scroll 0 0 #b26f4b;
border-radius: 22px 41px 52px 3px;
box-shadow: 0 6px 0 #b26f4b, 6px 0 0 #b26f4b inset;
content: "";
float: right;
height: 169px;
left: 45px;
position: absolute;
transform: rotate(0deg) skewX(8deg); -webkit-transform: rotate(0deg) skewX(8deg); -moz-transform: rotate(0deg) skewX(8deg); -ms-transform: rotate(0deg) skewX(8deg); -o-transform: rotate(0deg) skewX(8deg);
width: 60px;
}
.chocolateWithStuff2:after {
background: none repeat scroll 0 0 #decba0;
border-radius: 0 0 50px 50px;
box-shadow: 0 8px 0 #b26f4b inset, -10px 9px 0 #c4ad78 inset, 10px -107px 0 #b26f4b, 10px -174px 0 #b26f4b, -10px -113px 0 #d08358, -10px -173px 0 #d08358;
content: "";
height: 107px;
left: 51px;
margin: auto;
position: absolute;
top: 175px;
transform: rotate(0deg) skewX(4deg); -webkit-transform: rotate(0deg) skewX(4deg); -moz-transform: rotate(0deg) skewX(4deg); -ms-transform: rotate(0deg) skewX(4deg); -o-transform: rotate(0deg) skewX(4deg);
width: 20px;
}
.chocolateWithStuff2 {
background: none repeat scroll 0 0 #d08358;
border-radius: 39px 5px 0 50px;
box-shadow: 0 6px 0 #b26f4b;
content: "";
height: 169px;
left: -20px;
margin-left: 70px;
position: relative;
transform: rotate(0deg) skewX(-4deg); -webkit-transform: rotate(0deg) skewX(-4deg); -moz-transform: rotate(0deg) skewX(-4deg); -ms-transform: rotate(0deg) skewX(-4deg); -o-transform: rotate(0deg) skewX(-4deg);
width: 60px;
z-index: 666;
}
/*--------------------------------------------------*/
.poison:before {
background: none repeat scroll 0 0 #decba0;
border-radius: 0 0 50px 50px;
box-shadow: -10px 9px 0 #c4ad78 inset, 0 12px 0 #c4ad78 inset;
content: "";
height: 111px;
left: 49px;
margin: auto;
position: absolute;
top: 168px;
width: 20px;
z-index: -666;
}
.poison:after {
background: none repeat scroll 0 0 #bffee0;
border-radius: 70px 0 0 15px;
content: "";
float: right;
height: 167px;
position: absolute;
width: 58px;
}
.poison {
background: none repeat scroll 0 0 #9cf4ca;
border-radius: 70px 70px 15px 15px;
box-shadow: 0 6px 0 #9cf4ca;
height: 167px;
position: relative;
width: 120px;
margin-left: 70px;
}
Cant get enough icecream in pure css3 - Script Codes
Cant get enough icecream in pure css3 - Script Codes
Home Page Home
Developer Mikhail Korotkov
Username melawire
Uploaded November 08, 2022
Rating 4.5
Size 4,322 Kb
Views 24,288
Do you need developer help for Cant get enough icecream in pure css3?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mikhail Korotkov (melawire) Script Codes
Name
Login form page
Wind key, city logo. pure css
Pokemon. Pikachu on acid css3 animation
Contact form html5 css3 responsive
Skateboards in pure CSS
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!