mojwp.ru
Генератор рекламных блоков »
Назад

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

Опубликовано: 26.04.2013
Время на чтение: 2 мин
6
298

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

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


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

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

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

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

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

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

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

Оцени статью

Давай, оцени статью!

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • tanichka
    Опубликовано: 26.04.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 26.04.2013 Ответить на сообщение

      благодарю

  • Пётр
    Опубликовано: 27.04.2013 Ответить на сообщение

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

    • Пётр
      Опубликовано: 27.04.2013 Ответить на сообщение

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

  • Андрей
    Опубликовано: 29.04.2013 Ответить на сообщение

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

    • Виталий
      Опубликовано: 29.04.2013 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.

X
SEO-тема для WordPress сайта
Все заточено под продвижение. Максимально быстрая. Встроен функционал.