Смужки на CSS

26

Від автора: Смужки досить просто створювати CSS в наші дні. CSS градієнти за допомогою властивості background-image відмінно підтримують нас. Я подумав, що варто задокументувати деякі можливості і помістити їх тут для довідки.

Стандартні діагональні смужки

Діагональні смужки легко реалізувати завдяки repeating-linear-gradient():

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

Хіба що самим останнім значенням параметра color-stop є 100% або пусте значення, що означає 100%), це значення фіксоване. Крім цього, градієнт як би починається наново. Ось як я це бачу (збільшення):

Смужки на CSS

Діагональні смужки градієнтні

Якщо ви зробите фоном звичайний лінійний градієнт, а потім зробите половину смужок повністю прозорими, використовуючи повторюваний лінійний градієнт (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/[email protected]);

Будь-який напрямок, будь градус

Градієнт не зобов’язаний проходити під кутом 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
);

Приколи

Іноді можуть траплятися помилки при округленні або інші дивацтва відображення.

Смужки на CSS

Що можна зробити? Я сподіваюся, що з часом браузери виправлять ці проблеми.