2.4 KiB
2.4 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78a5367417b2b2512ad6 | Create a Gradual CSS Linear Gradient | 0 | إنشاء تدرج خطي متدرج CSS |
Description
linear-gradient()
لخاصية background
. هنا الصيغة العامة: background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
تحدد الوسيطة الأولى الاتجاه الذي يبدأ منه انتقال اللون - يمكن تحديده كدرجة ، حيث يجعل 90deg تدرجًا رأسيًا ويصبح 45deg مائلًا مثل الخط المائل العكسي (Backslash). الوسيطات التالية تحدد ترتيب الألوان المستخدمة في التدرج. مثال: background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
Instructions
linear-gradient()
background
عنصر div
، #CCFFFF
من اتجاه 35 درجة لتغيير اللون من #CCFFFF
إلى #FFCCCC
. ملحوظة بينما هناك طرق أخرى لتحديد قيمة لون ، مثل
rgb()
أو hsl()
، استخدم قيم سداسية لهذا التحدي. Tests
tests:
- text: يجب أن يحتوي عنصر <code>div</code> على <code>background</code> <code>linear-gradient</code> مع الاتجاه والألوان المحددين.
testString: 'assert(code.match(/background:\s*?linear-gradient\(35deg,\s*?(#CCFFFF|#CFF),\s*?(#FFCCCC|#FCC)\);/gi), "The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.");'
Challenge Seed
<style>
div{
border-radius: 20px;
width: 70%;
height: 400px;
margin: 50px auto;
}
</style>
<div></div>
Solution
// solution required