Повторяющиеся градиенты CSS онлайн урок.


Повторяющиеся градиенты принимают трюк, который мы уже можем сделать с творческим использованиемcolor-stopналинейных градиентах ()ирадиально-градиентных ()нотациях и выпекаем его для нас.

Идея состоит в том, что мы можем создавать шаблоны из создаваемых нами градиентов и позволять им бесконечно повторять.

Сравнение линейного градиента (слева) с повторяющимся линейным градиентом (справа).

Существует трюк с не повторяющимися градиентами, чтобы создать градиент таким образом, чтобы, если бы он был маленьким прямоугольником, он бы соответствовал другим маленьким маленьким прямоугольным версиям самого себя, чтобы создать повторяющийся шаблон. Поэтому создайте этот градиент и установитеbackground-size, чтобы сделать этот маленький крошечный прямоугольник. Это облегчило создание полос, которые вы могли затем вращать или что угодно.

# Синтаксис

Существует три типа повторяющихся градиентов, два из которых в настоящее время поддерживаются в официальной спецификации, а также в текущем рабочем черновике.

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

Повторение градиентаСвязанные примечанияПоддерживается?
повторяющийся-линейный градиент () линейный градиент () Да
повторяющийся-радиальный градиент радиальный градиент () Да
повторяющийся-конический градиент конический градиент () Нет

Где повторение градиентаопределяется конечной остановкой цвета. Если это при20px, размер градиента (который затем повторяется) равен20px20pxквадрата. То же самое верно, если к шаблону приковано несколько цветов. Конечный цвет с конечной остановкой определяет размер и расположение повтора.

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

То же самое с радиальным:

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

Повторяющиеся градиенты в настоящее время пользуются большой поддержкой браузера. Тем не менее, мы говорим только о линейных и радиальных градиентах на момент написания этой статьи, поскольку конические градиенты все еще являются предлагаемой особенностью рабочего проекта спецификации 4-го уровня. Здесь мы надеемся, что мы увидим широкое усыновление, когда оно достигнет рекомендации кандидата.

Эти данные поддержки браузера - от Caniuse , который имеет более подробную информацию. Число указывает, что браузер поддерживает эту функцию в этой версии и выше.

10 *11.6 *3.6 *10

Android Firefox57
iOS SafariOpera MobileOpera MiniAndroidAndroid Chrome
5.0-5.1 *12 *Нет4 *64