Повторяющиеся градиенты - это замечательная возможность сделать, например, полосатую текстуру, которую можно задать в качестве фона вместо фоновой картинки. Для этого есть несколько способов.
Способ 1. Использование свойства background-size для уменьшения области действия градиента
Обычно градиент распространяется по всей площади элемента. Но вы можете изменить эту ситуацию, задав свойство background-size (размер фона, если перевести на русский) менее 100%:
| 1 2 3 4 | .c1{ background: linear-gradient(to left, white 50%, #8b0 50%); background-size: 10%; } |
Также можно указать размер фона в px или em, например, причем с помощью 2-х цифр - по горизонтали (с помощью первой цифры) и по вертикали (с помощью второй). Еще интересней будет, если градиент расположить под углом 45 градусов:
| 1 2 3 4 | .c2{ background: linear-gradient(45deg, white 50%, #f4c 50%); background-size: 30px 30px; } |
Способ 2. Использование repeating-linear-gradient и repeating-radial-gradient для создания градиентных текстур
Есть специальные виды градиентов, которые уже в названии содержат слово repeating, т.е. являются повторяющимися уже исходя из названия:
| 1 2 3 4 5 6 | .c3 { background: repeating-linear-gradient(45deg, white 10%, #ab0 20%); } .c5 { background: repeating-radial-gradient( #f90 10px, transparent 20px, red 30px); } |
При использовании этих свойств важно указывать небольшие значения для позиций цветов градиента, например, 10px, 20px или 5%,15%, иначе никакого повторения градиента вы не увидите. Плюс стоит вспомнить о поддержке более старых версий браузеров и о вендорных префиксах:
- -moz-repeating-radial-gradient
- -webkit-repeating-radial-gradient
Как ни жаль, но IE отображает градиенты только с 10-й версии. Для младших версий нужно использовать свойство filter или изображение.
Рассмотренные выше примеры на практике:
Посмотреть код Repeating Gradient.
CSS3 Patterns Gallery
Есть люди, которые этим вопросом озадачились всерьез. Благодаря им мы можем использовать CSS3 Patterns Gallery, т.е. галерею CSS3 паттернов, посвященную текстурам на основе градиента.
Вам достаточно щелкнуть на соответствующем рисунке-текстуре, чтобы посмотреть и скопировать его код.
В примере ниже можно посмотреть примеры градиентных текстур и код для них.
See the Pen CSS3 Gradient Patterns by Elen (@ambassador) on CodePen.
В статье использованы примеры с сайта 24ways.org.
Особенности прозрачных градиентов в браузере Safari
Ели вы используете прозрачные градиенты в Safari, будьте готовы к тому, что вместо перехода от цвета к прозрачности вы получите серо-черную полосу. Так уж вышло, что разработчики этого популярного в iOS-системах браузера так и не вылечили этот баг. Его вызывает, например, такая строка:
| 1 | bg { background:linear-gradient(to right, #fff, transparent); } |
Для того чтобы избавится от полосы в Safari, нужно заменить transparent на rgba(255, 255, 255, 0) - это тоже прозрачный белый цвет, но в системе rgba(). Второй способ - указать после цвета в шестнадцатеричном формате нуль:
| 1 2 3 | .bg { background:linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); } /* или */ .bg { background:linear-gradient(to right, #fff, #fff0); } |
Например, такой код
| 1 2 3 4 5 6 7 8 9 10 11 12 | <style> #bg { height: 400px; padding: 10% 0; text-align: center; background: linear-gradient(to right, #fff 40%, #fff0), url(/wp-content/uploads/examples/bg-css/images/bg-purple.jpg) no-repeat center; } </style> <div id="bg"> <h2>Полупрозрачный градиент</h2> </div> |
приведет к такому результату:
Полупрозрачный градиент
Прикольно! Никогда не думал, что можно такие вещи с помощью градиентов сделать!
В сочетании с базовыми возможностями управления фоновыми картинками градиенты дают широчайшие возможности для создания фонов разной степени сложности совершенно без использования изображений. Градиентами можно делать сложные и интересные паттерны, но это уже совсем другая тема.
Да, все так. Именно об этом и идет речь в статье.