Несмотря на то что мне часто доводилось использовать едва уловимые линейные градиенты в дизайнах, с применением радиальных и повторяющихся градиентов в своей практике я сталкивался реже. Тем не менее на основе всех этих методик обеспечения фона умные люди создали фоновые градиентные узоры. Рассмотрим пример. Вместо повторяющегося радиального градиента, который я недавно добавлял в раздел 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.
Добавить комментарий