---
id: 61a4a7877da33a73a1c1723e
title: الخطوة 57
challengeType: 0
dashedName: step-57
---

# --description--

الآن بعد أن تم تعيين color-stops، ستطبق ظلال مختلفة من اللون الأحمر إلى كل حجة في وظيفة `linear-gradient`. ستكون الظلال الموجودة على الحواف العلوية والسفلية في marker أغمق، بينما ستكون الظلال الموجودة في المنتصف أفتح، كما لو كان هناك ضوء فوقها.

بالنسبة ألى حجة اللون الأول، التي هي حاليًا باللون الأحمر الخالص، حدث وظيفة `rgb` بحيث تكون قيمة الأحمر `122`، وقيمة الأخضر هي `74`، وقيمة الأزرق هي `14`.

# --hints--

يجب أن تحتوي قاعدة CSS مسمى `.red` على خاصية `background` بقيمة `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`.

```js
assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colored Markers</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>CSS Color Markers</h1>
    <div class="container">
      <div class="marker red">
      </div>
      <div class="marker green">
      </div>
      <div class="marker blue">
      </div>
    </div>
  </body>
</html>
```

```css
h1 {
  text-align: center;
}

.container {
  background-color: rgb(255, 255, 255);
  padding: 10px 0;
}

.marker {
  width: 200px;
  height: 25px;
  margin: 10px auto;
}

--fcc-editable-region--
.red {
  background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%);
}
--fcc-editable-region--

.green {
  background-color: #007F00;
}

.blue {
  background-color: hsl(240, 100%, 50%);
}

```
