Pure CSS3 Ice Cream
Demo
You have to eat this ice cream before it gets "HOT"!
CSS
#wrap22 {
width:200px;
margin:0px auto 0px;
position:relative;
text-align:center;
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
transform:rotate(-30deg);
}
#wrap22 .ice {
height:300px;
background-color:#FAA0AF;
background-image:-webkit-radial-gradient(top, cover, #FAA0AF, #FFCBD3);
background-image:-moz-radial-gradient(top, cover, #FAA0AF, #FFCBD3);
background-image:-ms-radial-gradient(top, cover, #FAA0AF, #FFCBD3);
background-image:-o-radial-gradient(top, cover, #FAA0AF, #FFCBD3);
background-image:radial-gradient(top, cover, #FAA0AF, #FFCBD3);
-webkit-box-shadow:inset 0px 0px 10px #fff, 0px 4px 10px rgba(0,0,0,0.2);
-moz-box-shadow:inset 0px 0px 10px #fff, 0px 4px 10px rgba(0,0,0,0.2);
box-shadow:inset 0px 0px 10px #fff, 0px 4px 10px rgba(0,0,0,0.2);
-webkit-border-radius:100px 100px 10px 10px;
-moz-border-radius:100px 100px 10px 10px;
border-radius:100px 100px 10px 10px;
position:relative;
}
#wrap22 .ice:after {
content:"";
position:absolute;
bottom:0px;
left:0px;
width:100%;
height:30px;
background-color:#FAA0AF;
background-image:-webkit-linear-gradient(top, #FF8B9D, #FAA0AF);
background-image:-moz-linear-gradient(top, #FF8B9D, #FAA0AF);
background-image:-ms-linear-gradient(top, #FF8B9D, #FAA0AF);
background-image:-o-linear-gradient(top, #FF8B9D, #FAA0AF);
background-image:linear-gradient(top, #FF8B9D, #FAA0AF);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:inset 0px 0px 10px #fff, 0px -1px 70px #fff;
-moz-box-shadow:inset 0px 0px 10px #fff, 0px -1px 70px #fff;
box-shadow:inset 0px 0px 10px #fff, 0px -1px 70px #fff;
}
#wrap22 .stick {
width:30px;
height:130px;
background-color:#FFEAC4;
background-image:-webkit-linear-gradient(-45deg, #FFEAC4, #FFF5DB);
background-image:-moz-linear-gradient(-45deg, #FFEAC4, #FFF5DB);
background-image:-ms-linear-gradient(-45deg, #FFEAC4, #FFF5DB);
background-image:-o-linear-gradient(-45deg, #FFEAC4, #FFF5DB);
background-image:linear-gradient(-45deg, #FFEAC4, #FFF5DB);
-webkit-box-shadow:inset 0px -1px 0px #fff, 0px 3px 0px #EDCE95, 0px 7px 10px rgba(0,0,0,0.2);
-moz-box-shadow:inset 0px -1px 0px #fff, 0px 3px 0px #EDCE95, 0px 7px 10px rgba(0,0,0,0.2);
box-shadow:inset 0px -1px 0px #fff, 0px 3px 0px #EDCE95, 0px 7px 10px rgba(0,0,0,0.2);
margin:-15px auto 0px;
-webkit-border-radius:3px 3px 15px 15px;
-moz-border-radius:3px 3px 15px 15px;
border-radius:3px 3px 15px 15px;
position:relative;
z-index:10;
}
HTML
<div id='wrap22'>
<div class='ice'></div>
<div class='stick'></div>
</div>
3 Komentar
Unknown
Hahahhaha Bang - Bang Ada2 aja Nih bikinanX hahaaha Entar Aku Makan Layar MonitorX laptopQ wkwkwkwk
Taufik Nurrohman
@system of blog: Hahahaaa..
Andy Nur
Asik nih bang, kerja sampingan jualan es ya :-bd .
saya pesan coklat kalau ada :D