--- title: CSS3 Gradients localeTitle: تدرجات CSS3 --- ## تدرجات CSS3 تتيح لك التدرجات CSS3 عرض انتقالات سلسة بين لونين محددين أو أكثر. في وقت سابق ، كان عليك استخدام الصور لهذه التأثيرات. ومع ذلك ، باستخدام تدرجات CSS3 ، يمكنك تقليل وقت التنزيل واستخدام النطاق الترددي. بالإضافة إلى ذلك ، تبدو العناصر ذات التدرجات أفضل عند التكبير ، لأن التدرج يتم إنشاؤه بواسطة المستعرض. يعرف CSS3 نوعين من التدرجات: * التدرجات الخطية (تنخفض / أعلى / يسار / يمين / مائل) * تدرجات نصف قطرية (محددة بمركزها) ### تدرجات خطية CSS3 لإنشاء تدرج خطي ، يجب تحديد نقطتي توقف للألوان على الأقل. توقف اللون هي الألوان التي تريد تقديم انتقالات سلسة بين. يمكنك أيضًا ضبط نقطة بداية واتجاه (أو زاوية) مع تأثير التدرج. #### بناء الجملة `background: linear-gradient(direction, color-stop1, color-stop2, ...); ` ##### التدرج الخطي - من الأعلى إلى الأسفل (هذا هو الإعداد الافتراضي) يوضح المثال التالي تدرج خطي يبدأ من الأعلى. يبدأ باللون الأحمر ، مع الانتقال إلى الأصفر: ![الافتراضي الخطية التدرج](https://i.imgur.com/2uGfleD.jpg) #### مثال `

Linear Gradient - Top to Bottom

This linear gradient starts at the top. It starts red, transitioning to yellow:

Note: Internet Explorer 9 and earlier versions do not support gradients.

` ![الافتراضي الخطية التدرج](https://i.imgur.com/CvtXCMd.jpg) ##### التدرج الخطي - من اليسار إلى اليمين يوضح المثال التالي تدرج خطي يبدأ من اليسار. يبدأ باللون الأحمر ، مع الانتقال إلى الأصفر: ![من اليسار إلى اليمين](https://i.imgur.com/e4dRvZR.jpg) #### مثال `

Linear Gradient - Left to Right

This linear gradient starts at the left. It starts red, transitioning to yellow:

Note: Internet Explorer 9 and earlier versions do not support gradients.

` ![من اليسار إلى اليمين](https://i.imgur.com/k4FSyXz.jpg) #### التدرج الخطي - قطري يمكنك جعل التدرج قطريًا بتحديد موضعتي البدء الأفقية والرأسية. يوضح المثال التالي تدرج خطي يبدأ من أعلى اليسار (ويذهب إلى أسفل اليمين). يبدأ باللون الأحمر ، مع الانتقال إلى الأصفر: ![قطري](https://i.imgur.com/YvtbUBH.jpg) #### مثال `

Linear Gradient - Diagonal

This linear gradient starts at top left. It starts red, transitioning to yellow:

Note: Internet Explorer 9 and earlier versions do not support gradients.

` ![قطري-إكسب](https://i.imgur.com/8gKRhAp.jpg) #### معلومات اكثر: [MDN Documentatiion](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient) || [w3schools](https://www.w3schools.com/css/css3_gradients.asp)