Фоны в css3. Прозрачность фона и другие фишки

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

Что дает CSS3 для фонов

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

Теперь добавляем наши фоны:

Как видите, я просто ставил запятые после полного перечисления параметров одного фона, после чего можно переходить к другому. Общий цвет контейнера лучше задать отдельно свойством background-color.

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

Важная особенность – перекрытие фонов

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

На этой картинке коробка, которая левее всех остальных, перекрывает правую, потому что стоит в коде первой. Вот такая особенность.

Задание размера фонам

Я говорил вам, что можно использовать еще один параметр. Он определяет размер фона. Кстати, раньше этого свойства не было, оно появилось вместе с CSS3. В свойстве для определения размера одного фона используется два параметра: размер по ширине и по высоте. Задавать его можно в пикселях, относительных единицах em или процентах. Посмотрите на этот синтаксис:

Итак, картинке, которая при перечислении фонов стоит первой, будут заданы размеры 60% по ширине и 40% по высоте. Истинные размеры будут зависеть от размера блока. Вторая и третья картинка получают абсолютные, фиксированные размеры – по 30 и 20 пикселей с каждой стороны соответственно. И вот что получилось:

Я немного поменял позицию картинок, чтобы было видно каждую из них. Теперь первая по коду стоит по центру, вторая – в верхнем левом углу, а третья – в правом нижнем. Как видите, все сработало. Картинка по центру стала огромной (даже ее качество ухудшилось), а остальные две наоборот уменьшились. Таким образом, вы можете менять размеры по своему желанию, получив именно то, что вам нужно.

Новый способ указания фона – линейный и радиальный градиент

О да, эти новые штуки позволили сделать верстку намного более интересным процессом. Именно с появлением CSS3 во многом отпала необходимость в использовании графики для различных эффектов.

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

Раньше на css такое нельзя было сделать, приходилось вырезать эту картинку и вставлять ее. Как вы понимаете, это не самый лучший подход, потому что на загрузку изображения нужно время. Теперь же появилась возможность писать градиент кодом. Вот такой градиент можно сделать на чистом CSS:

А в коде это реализуется следующим образом:

Как видите, важно записать ключевое слово linear-gradient. После этого в скобках задается направление (направо, налево, вверх, вниз, в верхний левый угол и т.д.) Если вам нужно по диагонали, то записывайте два слова: to top left, to bottom right. Я думаю, это понятно.

Направление можно задавать и в градусах (deg), это дает намного больше возможностей. После этого записывается цвет в любом цветовом режиме. Самым последним идет так называемый колорстоп. Это необязательный параметр, он позволяет определить, в каком месте будет самая насыщенная часть цвета. Чтобы сделать резкий переход цветов, нужно задать одинаковый колорстоп обоим цветам.

Подобным же образом можно задавать и радиальный градиент, только там другой синтаксис и нужно писать radial-gradient. Сейчас очень сложно будет объяснить вам все тонкости этих свойств, более подробно вы можете ознакомиться с ними в нашем курсе по CSS3.

Что еще можно делать в CSS3: плавная смена фона, прозрачность и полупрозрачность

Последние две возможности, которые мы с вами рассмотрим. Полную прозрачность можно установить так:

Полупрозрачность реализуется за счет задания цвета в режиме rgba, где последний параметр как раз определяет ее. Если записать так:

Если бы не полупрозрачность, это был бы черный цвет, но в действительности он будет намного светлее, и через него будут видны другие элементы, если они там есть (смотрите статью о полупрозрачности фона). Чтобы плавно изменить цвет при наведении используйте псевдокласс hover и свойство transition, в котором нужно задать время, за которое должен быть осуществлен плавный переход.

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

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

Комментарии Вконтакте: