Воздушные шары при помощи CSS

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

Подобное решение практически не нагружает ваш хостинг и не повлияет на скорость загрузки страницы. А использовать его можно как по прямому назначению, так и подсмотреть сами параметры стилей, чтобы применить их в других целях.

Воздушные шары при помощи CSS

Чуть ниже код с параметрами CSS, которые пропишите у себя. А вот ссылка на первоисточник (благодарю форумчанина за решение).

Итак, вставляем в нужное место на сайте или в шаблоне контейнер:

А в файле стилей вашего шаблона прописываем следующее:

.ball{ 
 /* позиционирование и размеры */ 
 position: relative; 
 width: 120px; 
 height: 120px; 
 /* скругление блока */ 
 -moz-border-radius: 70px; 
 -webkit-border-radius: 70px; 
 -o-border-radius: 70px; 
 -ms-border-radius: 70px; 
 border-radius: 70px; 
 background: #b4e391;/* фон на случай неподдержки градиента */ 
 /* градиент */ 
 background: -moz-radial-gradient(center, ellipse cover, #b4e391 0%, #61c419 100%); 
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#b4e391), color-stop(100%,#61c419)); 
 background: -webkit-radial-gradient(center, ellipse cover, #b4e391 0%,#61c419 100%); 
 background: -o-radial-gradient(center, ellipse cover, #b4e391 0%,#61c419 100%); 
 background: -ms-radial-gradient(center, ellipse cover, #b4e391 0%,#61c419 100%); 
 background: radial-gradient(center, ellipse cover, #b4e391 0%,#61c419 100%); 
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#61c419',GradientType=1 ); 
 /* внутренние тени блока */ 
 -webkit-box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000; 
 -moz-box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000; 
 -ms-box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000; 
 -o-box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000; 
 box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000; 
 }

.ball:after { 
 /* пустое содержание */ 
 content: ""; 

 /* размеры */ 
 width: 60px; 
 height: 30px; 

 /* скругление блока */ 
 -moz-border-radius: 40px / 20px; 
 -ms-border-radius: 40px / 20px; 
 -webkit-border-radius: 40px / 20px; 
 -o-border-radius: 40px / 20px; 
 border-radius: 40px / 20px; 

 /* позиционирование */ 
 position: absolute; 
 left: 30px; 
 top: 10px; 

 background: #fff; /* фон на случай неподдержки градиента */ 
 /* градиент */ 
 background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); 
 background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); 
 background: -ms-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); 
 background: -o-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); 
 background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); 
 }

Как сделать плавный переход цвета я уже писал в статье CSS градиент.

Обратите внимание как задается скругление углов, вплоть до появления воздушного шара. Все это сделано кроссбраузерно, чтобы одинаково смотрелось в FF, Хроме и Opera. Быть может вам и не пригодится делать именно шароподобные объекты на своем сайте, но теперь у вас есть необходимый набор знаний, который позволит реализовать другие фигуры: квадрат с градиентом, прямоугольник, овал. Дерзайте.

Собственно сама статья может и не появилась бы. Опять же случай всему виной: Портал bizzteams.ru и компания "АвиАрт", продающая Воздушные шары в Москве, накануне объявили конкурс.