2018-10-12 16:35:31 -04:00
---
title: CSS3 Gradients
localeTitle: تدرجات CSS3
---
## تدرجات CSS3
تتيح لك التدرجات CSS3 عرض انتقالات سلسة بين لونين محددين أو أكثر.
في وقت سابق ، كان عليك استخدام الصور لهذه التأثيرات. ومع ذلك ، باستخدام تدرجات CSS3 ، يمكنك تقليل وقت التنزيل واستخدام النطاق الترددي. بالإضافة إلى ذلك ، تبدو العناصر ذات التدرجات أفضل عند التكبير ، لأن التدرج يتم إنشاؤه بواسطة المستعرض.
يعرف CSS3 نوعين من التدرجات:
* التدرجات الخطية (تنخفض / أعلى / يسار / يمين / مائل)
* تدرجات نصف قطرية (محددة بمركزها)
### تدرجات خطية CSS3
لإنشاء تدرج خطي ، يجب تحديد نقطتي توقف للألوان على الأقل. توقف اللون هي الألوان التي تريد تقديم انتقالات سلسة بين. يمكنك أيضًا ضبط نقطة بداية واتجاه (أو زاوية) مع تأثير التدرج.
#### بناء الجملة
`background: linear-gradient(direction, color-stop1, color-stop2, ...);
`
##### التدرج الخطي - من الأعلى إلى الأسفل (هذا هو الإعداد الافتراضي)
2019-05-20 22:52:16 +03:00
يوضح المثال التالي تدرج خطي يبدأ من الأعلى. يبدأ باللون الأحمر ، مع الانتقال إلى الأصفر: 
2018-10-12 16:35:31 -04:00
#### مثال
`<!DOCTYPE html>
< html >
< head >
< style >
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green); /* Standard syntax (must be last) */
}
< / style >
< / head >
< body >
< h3 > Linear Gradient - Top to Bottom< / h3 >
< p > This linear gradient starts at the top. It starts red, transitioning to yellow:< / p >
< div id = "grad1" > < / div >
< p > < strong > Note:< / strong > Internet Explorer 9 and earlier versions do not support gradients.< / p >
< / body >
< / html >
`
2019-05-20 22:52:16 +03:00
2018-10-12 16:35:31 -04:00
##### التدرج الخطي - من اليسار إلى اليمين
2019-05-20 22:52:16 +03:00
يوضح المثال التالي تدرج خطي يبدأ من اليسار. يبدأ باللون الأحمر ، مع الانتقال إلى الأصفر: 
2018-10-12 16:35:31 -04:00
#### مثال
`<!DOCTYPE html>
< html >
< head >
< style >
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, red , green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , green); /* Standard syntax (must be last) */
}
< / style >
< / head >
< body >
< h3 > Linear Gradient - Left to Right< / h3 >
< p > This linear gradient starts at the left. It starts red, transitioning to yellow:< / p >
< div id = "grad1" > < / div >
< p > < strong > Note:< / strong > Internet Explorer 9 and earlier versions do not support gradients.< / p >
< / body >
< / html >
`
2019-05-20 22:52:16 +03:00
2018-10-12 16:35:31 -04:00
#### التدرج الخطي - قطري
يمكنك جعل التدرج قطريًا بتحديد موضعتي البدء الأفقية والرأسية.
يوضح المثال التالي تدرج خطي يبدأ من أعلى اليسار (ويذهب إلى أسفل اليمين). يبدأ باللون الأحمر ، مع الانتقال إلى الأصفر:
2019-05-20 22:52:16 +03:00
2018-10-12 16:35:31 -04:00
#### مثال
`<!DOCTYPE html>
< html >
< head >
< style >
#grad1 {
height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left top, red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red, green); /* Standard syntax (must be last) */
}
< / style >
< / head >
< body >
< h3 > Linear Gradient - Diagonal< / h3 >
< p > This linear gradient starts at top left. It starts red, transitioning to yellow:< / p >
< div id = "grad1" > < / div >
< p > < strong > Note:< / strong > Internet Explorer 9 and earlier versions do not support gradients.< / p >
< / body >
< / html >
`
2019-05-20 22:52:16 +03:00
2018-10-12 16:35:31 -04:00
#### معلومات اكثر:
[MDN Documentatiion ](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient ) || [w3schools ](https://www.w3schools.com/css/css3_gradients.asp )
