Страйпы в CSS

На сегодняшний день с помощью CSS страйпы создаются довольно легко. CSS-градиенты через свойства фонового изображения действительно серьезное подспорье в этом деле.

Я думаю можно создать в одном месте документ, на который потом будет легко ссылаться.

Содержание

Диагональные страйпы стандартных цветов

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

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

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

HTML:

<div class="module">
  <h2 class="stripe-1">Colored Stripes</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis hic sapiente asperiores minus animi nam temporibus cumque magnam doloribus vitae voluptatum cupiditate nostrum omnis vero adipisci recusandae maxime quo labore.</p>
</div>
Власть народу - относительные размеры шрифтов

SCSS:

.module {
  background: white;
  border: 1px solid #ccc;
  margin: 3%;
  > h2 {
    padding: 1rem;
    margin: 0 0 0.5rem 0;
  }
  > p {
    padding: 0 1rem;
  }
  /*animation: widen 10s linear alternate infinite;*/
}

.stripe-1 {
  color: white;
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}

/*@keyframes widen {
  100% {
    width: 100%;
  }
}*/

Результат

Градиентные диагональные страйпы

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

С помощью нескольких слоев (и порядка наложения), вы можете совместить все это в одном элементе:

background: 
  /* "Поверх" */
  repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #ccc 10px,
    #ccc 20px
  ),
  /* "на подложке" */
  linear-gradient(
    to bottom,
    #eee,
    #999
  );

HTML:

<div class="module">
  <h2 class="stripe-2">Градиентные страйпы</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis hic sapiente asperiores minus animi nam temporibus cumque magnam doloribus vitae voluptatum cupiditate nostrum omnis vero adipisci recusandae maxime quo labore.</p>

SCSS:

.module {
  background: white;
  border: 1px solid #ccc;
  margin: 3%;
  > h2 {
    padding: 1rem;
    margin: 0 0 0.5rem 0;
  }
  > p {
    padding: 0 1rem;
  }
}

.stripe-2 {
  color: black;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    #ccc 10px,
    #ccc 20px
  ),
  linear-gradient(
    to bottom,
    #eee,
    #999
  )
}
8 советов, которые помогут вам правильно составлять Sass

Результат

Страйпы поверх изображения

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

Или в любой комбинации. Опять несколько фонов можно совместить в одном элементе:

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);

HTML:

<div class="module">
  <h2 class="stripe-3">Поверх изображения</h2>
  <p>Quibusdam quos dolorum temporibus minima delectus suscipit consequatur excepturi illo veritatis adipisci dicta accusamus maiores vitae exercitationem saepe! Ut ex aut ab corporis nulla expedita voluptatem velit doloremque qui sapiente.</p>
</div>

SCSS:

.module {
  background: white;
  border: 1px solid #ccc;
  margin: 3%;
  > h2 {
    padding: 1rem;
    margin: 0 0 0.5rem 0;
  }
  > p {
    padding: 0 1rem;
  }
}

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

Результат

Любые направления, любые углы

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

Это всего лишь набор инструкций для создания повторяющихся элементов:

background: repeating-linear-gradient(
  -55deg,
  #222,
  #222 10px,
  #333 10px,
  #333 20px
);

HTML:

<div class="module">
  <h2 class="stripe-4">Другие направления, другие углы</h2>
  <p>Если используется много контрастных цветов, это может выглядеть негармонично. И даже обычные приемы типа translateZ(0) не смогут это исправить.</p>
</div>

SCSS:

.module {
  background: white;
  border: 1px solid #ccc;
  margin: 3%;
  > h2 {
    padding: 1rem;
    margin: 0 0 0.5rem 0;
  }
  > p {
    padding: 0 1rem;
  }
}

.stripe-4 {
  color: white;
  background: repeating-linear-gradient(
    -55deg,
    #222,
    #222 10px,
    #333 10px,
    #333 20px
  );
}
Изучаем CSS: тень блока

Результат

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

Существует очень старый синтаксис CSS-градиентов, который использует -webkit-gradient() (обратите внимание - не «линейные» или «радиальные»).

В основном это касается 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
);
/* Повторяющийся прямоугольник. 
   В данном случае он может быть растянут на всю ширину. */
background-size: 100% 20px;

HTML:

<div class="module">
  <h2 class="stripe-5"><span>Background-Size</span></h2>
  <p>Вы могли бы провернуть хитрый трюк там, где располагается большой вращающийся элемент в той области заголовка (с помощью скрытых переливов), где находятся эти страйпы. В этом случае вы можете обойтись без использования repeating-linear-gradient.</p>
</div>

SCSS:

.module {
  background: white;
  border: 1px solid #ccc;
  margin: 3%;
  > h2 {
    padding: 1rem;
    margin: 0 0 0.5rem 0;
  }
  > p {
    padding: 0 1rem;
  }
}

.stripe-5 {
  color: white;
  background: linear-gradient(
    to bottom,
    #5d9634,
    #5d9634 50%,
    #538c2b 50%,
    #538c2b
  );
  background-size: 100% 20px;
}

Результат

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

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

Вы можете использовать тот же метод, что описан выше и для вертикальных страйпов. Или просто использовать repeating-linear-gradient():

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

HTML:

<div class="module">
  <h2 class="stripe-6">Вертикальные</h2>
  <p>Вы могли бы провернуть хитрый трюк там, где располагается большой вращающийся элемент в той области заголовка (с помощью скрытых переливов), где находятся эти страйпы. В этом случае вы можете обойтись без использования repeating-linear-gradient.</p>
</div>

SCSS:

.module {
  background: white;
  border: 1px solid #ccc;
  margin: 3%;
  > h2 {
    padding: 1rem;
    margin: 0 0 0.5rem 0;
  }
  > p {
    padding: 0 1rem;
  }
}

.stripe-6 {
  color: black;
  background: repeating-linear-gradient(
    to right,
    #f6ba52,
    #f6ba52 10px,
    #ffd180 10px,
    #ffd180 20px
  );
}

Результат

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

Радиальные страйпы

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

/* Обратите внимание - это радиальный страйп */
background: repeating-radial-gradient(
  circle,
  purple,
  purple 10px,
  #4b026f 10px, 
  #4b026f 20px
);

HTML:

<div class="module">
  <h2 class="stripe-7">Radial</h2>
  <p> Вы могли бы провернуть хитрый трюк там, где располагается большой вращающийся элемент в той области заголовка (с помощью скрытых переливов), где находятся эти страйпы. В этом случае вы можете обойтись без использования repeating-linear-gradient.</p>
</div>

SCSS:

.module {
  background: white;
  border: 1px solid #ccc;
  margin: 3%;
  > h2 {
    padding: 1rem;
    margin: 0 0 0.5rem 0;
  }
  > p {
    padding: 0 1rem;
  }
}

.stripe-7 {
  color: white;
  background: repeating-radial-gradient(
    circle,
    purple,
    purple 10px,
    #4b026f 10px, 
    #4b026f 20px
  );
}

Результат

Возможные казусы

Иногда случаются ошибки при закруглениях (возможно?) или другие любопытные казусы.