Полоски на CSS

Полоски на CSS

От автора: Полоски достаточно просто создавать на CSS в наши дни. CSS градиенты с помощью свойства background-image отлично поддерживают нас. Я подумал, что стоит задокументировать некоторые возможности и поместить их здесь для справки.

 

Стандартные диагональные полоски

Диагональные полоски легко реализовать благодаря repeating-linear-gradient():

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Разве что самым последним значением параметра color-stop является 100% или (пустое значение, что означает 100%), это значение фиксировано. Помимо этого, градиент как бы начинается заново. Вот как я это вижу (с увеличением):

Диагональные градиентные полоски

Если вы сделаете фоном обычный линейный градиент, а затем сделаете половину полосок полностью прозрачными, используя повторяющийся линейный градиент (repeating-linear-gradient()), это будет выглядеть так, будто на полоски наложен градиент. Благодаря множественному фону (и порядку размещения), вы можете задать эти все свойства одному элементу:

Полоски поверх изображения

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

Любое направление, любой градус

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Продольные полоски (браузеры поддерживают немного лучше)

Есть очень старый синтаксис для CSS градиентов, который использовал свойство –webkit-gradient() (обратите внимание на отсутствие “linear” и “radial”). В частности Safari 4, Chrome 1-9, iOS 3.2-4.3, Android 2.1-3.0. Старая история. Эти браузеры не поддерживают повторяющиеся градиенты. Но вы можете их сымитировать, особенно продольные полоски, посредством небольшого прямоугольника с помощью свойства background-size, нарисовав полоски внутри, и задав им повторение естественным образом как повторяется background-image.

Если у вас есть желание, вы можете задать transform: rotate() какому-то элементу с этими полосками и обрезать выдающуюся часть. Таким образом, вы сможете повторить диагональные полоски с более глубокой поддержкой браузеров. Звучит как много работы.

Вертикальные полоски

Вы можете использовать тот же метод и для вертикальных полосок. Или использовать повторяющийся линейный градиент:

Итак, еще раз проясним: используя повторяющийся линейный градиент, вам лучше использовать repeating-linear-gradient() в сочетании с –webkit-repeating-linear-gradient() или вы можете купить препоцессор, чего я бы не советовал.

Круговые полоски

Кто сказал, что полоски должны быть прямыми? Круговые градиенты могут быть созданы с помощью repeating-linear-gradients():

Приколы

Иногда могут случаться ошибки при округлении или другие странности отображения.

Что можно сделать? Я надеюсь, что со временем браузеры исправят эти проблемы.

Автор: Chris Coyier

Источник: http://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Похожие статьи:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree