От автора: Полоски достаточно просто создавать на CSS в наши дни. CSS градиенты с помощью свойства background-image отлично поддерживают нас. Я подумал, что стоит задокументировать некоторые возможности и поместить их здесь для справки.
Стандартные диагональные полоски
Диагональные полоски легко реализовать благодаря repeating-linear-gradient():
|
1 2 3 4 5 6 7 |
background: repeating-linear-gradient( 45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px ); |
Разве что самым последним значением параметра color-stop является 100% или (пустое значение, что означает 100%), это значение фиксировано. Помимо этого, градиент как бы начинается заново. Вот как я это вижу (с увеличением):
Диагональные градиентные полоски
Если вы сделаете фоном обычный линейный градиент, а затем сделаете половину полосок полностью прозрачными, используя повторяющийся линейный градиент (repeating-linear-gradient()), это будет выглядеть так, будто на полоски наложен градиент. Благодаря множественному фону (и порядку размещения), вы можете задать эти все свойства одному элементу:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
background: /* Сверху */ repeating-linear-gradient( 45deg, transparent, transparent 10px, #ccc 10px, #ccc 20px ), /* Снизу */ linear-gradient( to bottom, #eee, #999 ); |
Полоски поверх изображения
Возможно текстура? Любое изображение подойдет. Вы можете показать часть изображения, сделав некоторые полоски полностью прозрачными, а другие полностью закрашенными. Или, любым другим способом. Снова множественный фон, позволяет задать все эти свойства одному элементу.
|
1 2 3 4 5 6 7 8 |
background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 10px, rgba(0, 0, 0, 0.3) 10px, rgba(0, 0, 0, 0.3) 20px ), url(//s3-us-west-2.amazonaws.com/s.cdpn.io/3/old_map_@2X.png); |
Любое направление, любой градус
Градиент не обязан проходить под углом 45 градусов. В этом и есть красота повторяющегося линейного градиента. Это не похоже на идеальный прямоугольник, который должен сходиться и повторяться, это просто набор инструкций для отрисовки, который повторяется.
|
1 2 3 4 5 6 7 |
background: repeating-linear-gradient( -55deg, #222, #222 10px, #333 10px, #333 20px ); |
Продольные полоски (браузеры поддерживают немного лучше)
Есть очень старый синтаксис для CSS градиентов, который использовал свойство –webkit-gradient() (обратите внимание на отсутствие “linear” и “radial”). В частности Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0. Старая история. Эти браузеры не поддерживают повторяющиеся градиенты. Но вы можете их сымитировать, особенно продольные полоски, посредством небольшого прямоугольника с помощью свойства background-size, нарисовав полоски внутри, и задав им повторение естественным образом как повторяется background-image.
|
1 2 3 4 5 6 7 8 9 |
background: linear-gradient( to bottom, #5d9634, #5d9634 50%, #538c2b 50%, #538c2b ); /* Прямоугольник, в котором повторяется градиент, может иметь ширину 100% */ background-size: 100% 20px; |
Если у вас есть желание, вы можете задать transform: rotate() какому-то элементу с этими полосками и обрезать выдающуюся часть. Таким образом, вы сможете повторить диагональные полоски с более глубокой поддержкой браузеров. Звучит как много работы.
Вертикальные полоски
Вы можете использовать тот же метод и для вертикальных полосок. Или использовать повторяющийся линейный градиент:
|
1 2 3 4 5 6 7 |
background: repeating-linear-gradient( to right, #f6ba52, #f6ba52 10px, #ffd180 10px, #ffd180 20px ); |
Итак, еще раз проясним: используя повторяющийся линейный градиент, вам лучше использовать repeating-linear-gradient() в сочетании с –webkit-repeating-linear-gradient() или вы можете купить препоцессор, чего я бы не советовал.
Круговые полоски
Кто сказал, что полоски должны быть прямыми? Круговые градиенты могут быть созданы с помощью repeating-linear-gradients():
|
1 2 3 4 5 6 7 8 |
/* Обратите внимание на префикс RADIAL */ background: repeating-radial-gradient( circle, purple, purple 10px, #4b026f 10px, #4b026f 20px ); |
Приколы
Иногда могут случаться ошибки при округлении или другие странности отображения.
Что можно сделать? Я надеюсь, что со временем браузеры исправят эти проблемы.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
