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

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

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


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

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

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

<div class="ball"></div>

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

.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 и компания "АвиАрт", продающая Воздушные шары в Москве, накануне объявили конкурс.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 6 комментариев
  1. tanichka (38 комм.):
    http://wwoman.net/

    Удачи в конкурсе!!!

  2. Пётр (9 комм.):
    http://moi-tarakany.ru

    О каком конкурсе идет речь? Есть ссылка на страницу конкурса? Хотелось бы принять участие.

    • Пётр (9 комм.):
      http://moi-tarakany.ru

      Поспешил с вопросом, нашел ответ самостоятельно. Удачи в конкурсе!

  3. Андрей (129 комм.):
    http://zarobitok.ru/

    Отличный пост Виталий, как всегда на высоте, скажу честно еще не копался в стилях, а можно сделать так чтобы в центре круга была буква?
    Заранее юлагодарен

    • Виталий (1674 комм.):

      конечно можно. Вставляем ее внутри контейнера div и прописываем уже букве стиль какой нужно.

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 12.66MB | MySQL:68 | 0,390sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html