Функция repeat-linear-gradient() очень похожа на linear-gradient(), с той разницей, что она повторяет указанный шаблон градиента. repeating-linear-gradient() принимает множество значений, но для простоты понимания, в этой задаче вы будете работать со значением угла и значениями остановки цвета.
Значение угла - это направление градиента.
Цветовые точки похожи на значения ширины, которые отмечают, где происходит переход, и указываются в процентах или количестве пикселей.
В примере, продемонстрированном в редакторе кода, градиент начинается с желтого цвета в 0 пикселей, который смешивается со вторым синим цветом в 40 пикселях от начала. Поскольку следующая остановка цвета также находится на 40 пикселях, градиент сразу же меняется на третий зеленый цвет, который сам смешивается с четвертым значением красного цвета, поскольку он находится на расстоянии 80 пикселей от начала градиента.
В этом примере полезно думать о цветовых остановках как о парах, в которых каждые два цвета смешиваются друг с другом.
0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
Если каждые два значения остановки цвета имеют один и тот же цвет, смешение не заметно, потому что оно находится между одним и тем же цветом, за которым следует жесткий переход к следующему цвету, поэтому вы получаете полосы.
Задание:
- Создайте полосы, изменив функцию repeating-linear-gradient (), чтобы использовать угол градиента 45 градусов,
- Затем установите первые две точки цвета на желтый (yellow)
- Вторые две точки цвета измените на черный (black).
