Полоски на CSS

Полоски на CSS

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

 

автор

Перевод выполнила: Валерия Заруцкая

Меня зовут Валерия, я живу в Киеве. Переводчик в прошлом, сейчас я фронт-энд разработчик. Неплохо владею HTML5 и CSS3, Twitter bootstrap, адаптивной версткой, работаю с jQuery, активно изучаю чистый JavaScript, имею представление об MVC фреймворках, в частности Ruby on Rails.

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

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

background: repeating-linear-gradient(
  45deg,
  #606dbc,
  #606dbc 10px,
  #465298 10px,
  #465298 20px
);

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

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

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

background: 
  /* Сверху */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #ccc 10px,
    #ccc 20px
  ),
  /* Снизу */
  linear-gradient(
    to bottom,
    #eee,
    #999
  );

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

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

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(http://s3-us-west-2.amazonaws.com/s.cdpn.io/3/old_map_@2X.png);

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

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

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.

background: linear-gradient(
  to bottom,
  #5d9634,
  #5d9634 50%,
  #538c2b 50%,
  #538c2b
);
/* Прямоугольник, в котором повторяется градиент, может иметь ширину 100% */
background-size: 100% 20px;

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

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

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

background: repeating-linear-gradient(
  to right,
  #f6ba52,
  #f6ba52 10px,
  #ffd180 10px,
  #ffd180 20px
);

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

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

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

/* Обратите внимание на префикс RADIAL */
background: repeating-radial-gradient(
  circle,
  purple,
  purple 10px,
  #4b026f 10px, 
  #4b026f 20px
);

Приколы

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

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

Автор: Chris Coyier

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

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

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

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

Получить

Метки: ,

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree