2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии

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

Скрипты для uCoz 2012-Авг-23 Elusive 989 3

Вот сегодня что то искал, наткнулся на мороженное сделанное только на CSS. Мне лично понравилось и я удивился не мало, пробывал конечно без готового шаблона но получалось криво=) В общем пробуйте, кому интересно

Код 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;  
}  
Источник: http://otlichnica.com
3 комментария
avatar
1
Писец, оч нужная вещь *О*
avatar
2
Не думал что она такая важная, ну пользуйся на здоровья раз очень понравилось
avatar
3
ахах прикольно =)
avatar