Повторювані градієнти CSS - CSS-хитрощі

Повторювані градієнти взяти трюк ми вже можемо зробити з творчим використанням color-stopsна linear-gradient()і radial-gradient()нотації, і печуть його для нас.

Ідея полягає в тому, що ми можемо створювати візерунки з градієнтів, які ми створюємо, і дозволяти їм повторювати нескінченно.

Порівняння лінійного градієнта (ліворуч) з повторюваним лінійним градієнтом (праворуч).

Існує хитрість з не повторюваними градієнтами, щоб створити градієнт таким чином, що якби це був маленький крихітний прямокутник, він вирівнювався б з іншими самими маленькими крихітними версіями прямокутника, щоб створити повторюваний шаблон. Отже, по суті створіть цей градієнт і встановіть, background-sizeщоб зробити цей маленький крихітний прямокутник. Завдяки цьому було легко зробити смуги, які ви потім могли обертати або що завгодно.

Синтаксис

Існує три типи повторюваних градієнтів, два з яких в даний час підтримуються в офіційній специфікації, а той, що є в поточному робочому проекті.

Синтаксис кожного позначення такий самий, як і відповідний тип градієнта. Наприклад, repeating-linear-gradient()слід той самий синтаксис, що і linear-gradient().

Повторний градієнт	Пов’язані позначення	Підтримується?
`repeating-linear-gradient()`	`linear-gradient()`	Так
`repeating-radial-gradient`	`radial-gradient()`	Так
`repeating-conic-gradient`	`conic-gradient()`	Ні

Там, де градієнт повторюється, визначається кінцева зупинка кольору . Якщо це на 20pxрозмір градієнта (який потім повторює) являє собою 20pxпо 20pxплощі. Те саме справедливо, якщо до малюнка прикуто кілька кольорів. Кінцевий колір із кінцевою зупинкою визначає розмір та місце повторення.

.repeat ( background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /* determines size */ ); )

Дивіться Pen lAkyo від Chris Coyier (@chriscoyier) на CodePen.

Те саме з радіальним:

.repeat ( background: repeating-radial-gradient( circle at 0 0, #eee, #ccc 50px ); )

Дивіться Pen Repeating Gradients від Chris Coyier (@chriscoyier) на CodePen.

Підтримка браузера

Наразі повторювані градієнти користуються чудовою підтримкою браузера. Тим не менш, ми говоримо лише про лінійні та радіальні градієнти на момент написання цієї статті, оскільки конічні градієнти все ще є запропонованою особливістю в робочому проекті рівня 4 рівня специфікації. Ось сподіваємось, ми побачимо широке прийняття, як тільки воно досягне рекомендації кандидата.

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.