Рисуем мороженое используя только CSS

Этот пример, ярко демонстрирующий, какие возможности дает CSS, я нашла на сайте http://cssdeck.com. Но так как русский народ не очень любит английский, я решила выложить решение на этом сайте.
Вот, что у Вас должно получиться:

Демо

А делается это все очень просто

Код Html

Code
<div id=»ice»>
<div class=»ice»></div>
<div class=»stick»></div>
</div>
<h1>Съешьте его, пока не расстаяло :)!</h1>

Код CSS

Code
h1 {
  color:#666666;
  font:normal 30px Impact,Arial,Sans-Serif;
  text-align:center;
  text-shadow:0px 1px 0px #ccc, 0px 1px 7px rgba(0,0,0,0.4);
  text-transform:uppercase;
}

#ice {
  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);
}

#ice .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;
}

#ice .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;
}

#ice .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:5;
}