Фоновые градиентные узоры в CSS3

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

Body {

Background-color: white; background-image: radial-gradient (hsla (0, 0%, 87%, 0.31) 9px, transparent 10px), repeating-radial-gradient (hsla (0, 0%, 87%, 0.31) 0,

Hsla (0, 0%, 87%, 0.31) 4px, transparent 5px, transparent 20px, hsla (0, 0%, 87%, 0.31) 21px, hsla (0, 0%, 87%, 0.31) 25px, transparent 26px, transparent 50px); background-size: 30px 30px, 90px 90px; background-position: 0 0;

}

На рисунке 6.18 показано, как результат будет выглядеть в браузере.

Для страницы задан фон в виде узора.

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

Специалист по CSS Лиа Веру (Lea Verou) создала постоянно пополняющийся ресурс фоновых узоров CSS, доступный по адресу http://lea. verou. me/css3patterns/ (рисунок 6.19).

Сайт CSS Patterns Gallery.