freeCodeCamp/curriculum/challenges/russian/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.russian.md

id, title, challengeType, videoUrl, forumTopicId, localeTitle

id	title	challengeType	videoUrl	forumTopicId	localeTitle
587d78a5367417b2b2512ad7	Use a CSS Linear Gradient to Create a Striped Element	0	https://scrimba.com/c/c6bmQh2	301072	Используйте линейный градиент CSS для создания полосатого элемента

Description

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

Instructions

Сделайте полосы, изменив repeating-linear-gradient() чтобы использовать градиентный угол 45deg , затем установите, чтобы первые два цвета остановились на yellow , и, наконец, второй цвет прекратился до black .

Tests

tests:
  - text: The angle of the <code>repeating-linear-gradient()</code> should be 45deg.
    testString: assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
  - text: The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg
    testString: assert(!code.match(/90deg/gi));
  - text: The color stop at 0 pixels should be <code>yellow</code>.
    testString: assert(code.match(/yellow\s+?0(px)?/gi));
  - text: One color stop at 40 pixels should be <code>yellow</code>.
    testString: assert(code.match(/yellow\s+?40px/gi));
  - text: The second color stop at 40 pixels should be <code>black</code>.
    testString: assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
  - text: The last color stop at 80 pixels should be <code>black</code>.
    testString: assert(code.match(/black\s+?80px/gi));

Challenge Seed

<style>

  div{
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
    background: repeating-linear-gradient(
      90deg,
      yellow 0px,
      blue 40px,
      green 40px,
      red 80px
    );
  }

</style>

<div></div>

Solution

<style>
  div{
    border-radius: 20px;
    width: 70%;
    height: 400px;
    margin:  50 auto;
    background: repeating-linear-gradient(
      45deg,
      yellow 0px,
      yellow 40px,
      black 40px,
      black 80px
    );
  }
</style>
<div></div>