freeCodeCamp

4.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78a5367417b2b2512ad7	Use a CSS Linear Gradient to Create a Striped Element	0		استخدم CSS Linear Gradient لإنشاء عنصر مخطط

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: يجب أن تكون زاوية <code>repeating-linear-gradient()</code> 45 درجة.
    testString: 'assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should be 45deg.");'
  - text: يجب ألا تكون زاوية <code>repeating-linear-gradient()</code> 90 درجة
    testString: 'assert(!code.match(/90deg/gi), "The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg");'
  - text: يجب أن يكون لون التوقف عند 0 بكسل <code>yellow</code> .
    testString: 'assert(code.match(/yellow\s+?0(px)?/gi), "The color stop at 0 pixels should be <code>yellow</code>.");'
  - text: يجب أن تكون درجة اللون الواحدة عند 40 بكسل <code>yellow</code> .
    testString: 'assert(code.match(/yellow\s+?40px/gi), "One color stop at 40 pixels should be <code>yellow</code>.");'
  - text: يجب أن يكون اللون الثاني في 40 بكسل <code>black</code> .
    testString: 'assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi), "The second color stop at 40 pixels should be <code>black</code>.");'
  - text: يجب أن تكون نقطة توقف اللون الأخيرة عند 80 بكسل <code>black</code> .
    testString: 'assert(code.match(/black\s+?80px/gi), "The last color stop at 80 pixels should be <code>black</code>.");'

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

// solution required

4.3 KiB Raw Blame History