3019f80a14
* fix: replace imgur to s3 for arabic guide files with no conflict (cherry picked from commit 96a14a1f278c12e0123216813ab27076b1bcdb66) * fix: remove extra links Co-Authored-By: Randell Dawson <5313213+RandellDawson@users.noreply.github.com> * fix: revert changes * fix: revert changes * fix: remove an unnecessary url addition.
5.3 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| CSS3 Gradients | تدرجات CSS3 |
تدرجات CSS3
تتيح لك التدرجات CSS3 عرض انتقالات سلسة بين لونين محددين أو أكثر.
في وقت سابق ، كان عليك استخدام الصور لهذه التأثيرات. ومع ذلك ، باستخدام تدرجات CSS3 ، يمكنك تقليل وقت التنزيل واستخدام النطاق الترددي. بالإضافة إلى ذلك ، تبدو العناصر ذات التدرجات أفضل عند التكبير ، لأن التدرج يتم إنشاؤه بواسطة المستعرض.
يعرف CSS3 نوعين من التدرجات:
- التدرجات الخطية (تنخفض / أعلى / يسار / يمين / مائل)
- تدرجات نصف قطرية (محددة بمركزها)
تدرجات خطية CSS3
لإنشاء تدرج خطي ، يجب تحديد نقطتي توقف للألوان على الأقل. توقف اللون هي الألوان التي تريد تقديم انتقالات سلسة بين. يمكنك أيضًا ضبط نقطة بداية واتجاه (أو زاوية) مع تأثير التدرج.
بناء الجملة
background: linear-gradient(direction, color-stop1, color-stop2, ...);
التدرج الخطي - من الأعلى إلى الأسفل (هذا هو الإعداد الافتراضي)
يوضح المثال التالي تدرج خطي يبدأ من الأعلى. يبدأ باللون الأحمر ، مع الانتقال إلى الأصفر: 
مثال
`
<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>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.
</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>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.
</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>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.
</html> `