Создание многослойного фона при помощи CSS3

Опубликовал: 6 лет назад CSS, Веб-Дизайн

Добрый день дорогие друзья.

Это песочница Виктора Доценко и собственно сам Виктор Доценко. Рад знакомству, если вы впервые в моем блоге. Сегодня мы с вами рассмотрим на примере, как можно создать многослойное фоновое изображение и попробуем его анимировать.  Это будет довольно легко ведь все это позволяет нам сделать CSS3. Интересно? Тогда смело отправляйся в полную версию статьи.


css3

Немного истории

Добавление фонового изображения — это далеко не новая возможность. Она существует уже довольно давно. Но мы были ограниченны тем, что могли добавить лишь одно изображение. Появился CSS3 и дал нам более широкие возможности и возможность добавления нескольких фоновых изображений (Multiple Backgrounds).


Как использовать Multiple Backgrounds?

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

Теперь код, который чуть выше выглядит совсем лишним. Все это просто сделать в CSS3 через  - background-image. Теперь код выглядит вот так:

С этим кодом, мы добавили все те же четыре изображения с различными позициями производя вот такой вот красивый вид:multiple-background-preview


Добавляем эффекты анимации

Кроме того, что мы уже с вами сделали мы можем добавить еще и эффектов к данному уроку.

Для того, чтобы кодировать было проще мы будем использовать W3C стандарт. Для IE9, Firefox, Opera, Chrome и Safari, по прежнему нужно использовать их личные префиксы.

После того как мы определили @keyframes, то  остается лишь добавить анимации для ключевого кадра, в данном случае .weather

Вот и все! Теперь вы можете посмотреть демонстрацию с анимацией  (корректная работа в Chrome и Safari) и скачать исходники для своих экспериментов.

Надеюсь статья была полезна вам дорогие друзья. Не забывайте подписываться на RSS, рассылку на почту и чаще посещайте блог Виктора Доценко, а так же комментируйте и делитесь ссылками в социальные сети. Всего доброго дорогие друзья.

P.S: upd 03.06.2013


Новая система комментариев
comments powered by HyperComments