Webmasters.BY

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

Что мы будем делать?

Демонстрация

Несколько фоновых изображений

До недавнего времени я никогда не пробовал использовать нескольких фоновых изображений в моих стилях. Я знал, что такая возможность существовала, но я не мог придумать какой-то уникальный пример, чтобы использовать это.

Решение, которое я придумал было в том, чтобы создать некоторые эффекты при наведении, при этом будет использоваться несколько фонов для создания эффекта анимации. Получилась замечательная вещь, поэтому я решил показать вам, как это работает.

Сегодня мы создадим пять различных версий.

Концепция

Обычная CSS hover-анимация довольно проста: одно изображение сдвигается в сторону, показывая при этом другое, или вращается, или подскакивает, цвета блекнут и т.д., ну вы поняли идею.

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

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

Теперь надеюсь понятно что и как мы собираемся делать. Давайте перейдем к самому интересному и начнем создавать наши hover-эффекты.

Раздвижные двери: горизонтальные

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

Я буду использовать текстуры Dark Wood с утонченными узорами и пиктограммы  WC Sold Out A Bta.

CSS

Создайте пустой div в HTML и примените класс, который использует некоторые основные стили. Мы будем применять этот класс для каждого из примеров, которые мы создадим сегодня.

Самое главное здесь это border-radius, который установлен в половину высоты/ширины, тем самым мы создаем круг.

Наши фоновые изображения будут сложены одно на другое.

Использование нескольких фоновых изображений

Первое, что мы собираемся сделать, это применить два фоновых изображения, но мы собираемся использовать текстуру древесины дважды в наших трех фонах.

Применение нескольких фоновых изображений в CSS так же просто, как применение одного, просто разделите их запятыми.

Эти изображения будут иметь естественный порядок расположения, то есть в порядке, в котором мы перечислили их: первое из них - это верхнее изображение и последнее то, которое идет в конце.

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

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