English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل CSS

قواعد CSS (@RULES)

كامل مواصفات CSS

دالة CSS linear-gradient()

يُنشئ دالة CSS linear-gradient() "صورة" تمثل تدرج الألوان الخطي. النتيجة هي عنصر CSS من نوع <gradient>، وهو شكل خاص من <image>.

وظائف CSS

مثال على الإنترنت

الآن سنرى مثالاً على تدرج خطي من الرأس إلى الذيل، من الأحمر إلى الأصفر، ثم إلى الأزرق:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>دليل أساسي(oldtoolbag.com)</title>　
<style>
#grad1 {
　　height: 200px;
　　background-image: linear-gradient(red, yellow, blue);
}
</style>
</head>
<body>
<h3>تدرج خطي - من الرأس إلى الذيل</h3>
<p>تدرج خطي من الرأس إلى الذيل، من الأحمر إلى الأصفر، ثم إلى الأزرق:</p>
<div id="grad1"></div>
<p><strong>ملاحظة:</strong> لا يدعم متصفح Internet Explorer 9 وأحدث إصداراته التدرج.</p>
</body>
</html>
الاختبار لرؤية ‹/›

التعريف والاستخدام

يستخدم دالة linear-gradient() لإنشاء "صورة" تدرج خطي.

لإنشاء تدرج خطي، تحتاج إلى تعيين نقطة البداية ونقطة النهاية (محددة بزاوية) وتأثير التدرج. كما يجب عليك تحديد اللون النهائي. اللون النهائي هو اللون الذي تريد Gecko أن ينتقل منه بشكل سلس، ويجب أن تُحدد على الأقل اثنين، وبالطبع يمكنك تحديد المزيد من الألوان لإنشاء تدرج أكثر تعقيدًا.

مثال على التدرج الخطي

إصدارات الدعم: CSS3

توافق المتصفحات

الرقم في الجدول يمثل إصدار المتصفح الأول لدعم هذه الوظيفة.

رقم "webkit" أو "moz" أو "o" المحدد هو إصدار التشغيل الأول لدعم هذه الوظيفة.

الوظيفة




linear-gradient()26.0
10.0 -webkit-		10.016.0
3.6 -moz-		6.1
5.1 -webkit-		12.1
11.1 -o-

نحو CSS

background-image: linear-gradient(اتجاه, color-stop1, color-stop2, ...)
القيمةوصف
اتجاهباستخدام قيمة الزاوية تحدد اتجاه التدرج (أو الزاوية).
color-stop1, color-stop2,...لتحديد الألوان البداية والنهاية للتدرج.

مثال على الإنترنت

هذا المثال يوضح التدرج الخطي من الجانب الأيسر، من الأحمر إلى الأصفر:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>دليل أساسي(oldtoolbag.com)</title>　
<style>
#grad1 {
　　　　height: 200px;
　　　　background-color: red; /* غير مدعوم عند عدم دعم التدرج */
　　　　background-image: linear-gradient(to right, red, yellow);
}
</style>
</head>
<body>
<h3>التدرج الخطي - من اليسار إلى اليمين</h3>
<p>التدرج الخطي من الجانب الأيسر. يبدأ بالأحمر وينتقل ببطء إلى الأصفر:</p>
<div id="grad1"></div>
<p><strong>ملاحظة:</strong> لا يدعم Internet Explorer 8 وأحدث إصداراته التدرج.</p>
</body>
</html>
الاختبار لرؤية ‹/›

مثال على الإنترنت

هذا المثال يوضح التدرج الخطي من الزاوية العلوية اليسرى إلى الزاوية السفلية اليمنى:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>دليل أساسي(oldtoolbag.com)</title>　
<style>
#grad1 {
　　　　height: 200px;
　　　　background-color: red; /* غير مدعوم عند عدم دعم التدرج */
　　　　background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>
<h3>التدرج الخطي - الزوايا المائلة</h3>
<p>التدرج الخطي من الزاوية العلوية اليسرى (إلى الزاوية السفلية اليمنى):. يبدأ بالأحمر وينتقل ببطء إلى الأصفر:</p>
<div id="grad1"></div>
<p><strong>ملاحظة:</strong> لا يدعم Internet Explorer 8 وأحدث إصداراته التدرج.</p>
</body>
</html>
الاختبار لرؤية ‹/›

مثال على الإنترنت

هذا المثال يوضح التدرج الخطي المحدد بزاوية واحدة:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>دليل أساسي(oldtoolbag.com)</title>　
<style>
#grad1 {
　　height: 100px;
　　background-color: red; /* يتم عرضه عند عدم دعم المتصفح */
　　background-image: linear-gradient(0deg, red, yellow);　
}
#grad2 {
　　height: 100px;
　　background-color: red; /* يتم عرضه عند عدم دعم المتصفح */
　　background-image: linear-gradient(90deg, red, yellow);　
}
#grad3 {
　　height: 100px;
　　background-color: red; /* يتم عرضه عند عدم دعم المتصفح */
　　background-image: linear-gradient(180deg, red, yellow);　
}
#grad4 {
　　height: 100px;
　　background-color: red; /* يتم عرضه عند عدم دعم المتصفح */
　　background-image: linear-gradient(-90deg, red, yellow);　
}
</style>
</head>
<body>
<h3>التدرج الخطي - استخدام زوايا مختلفة</h3>
<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>
<p><strong>ملاحظة:</strong> Internet Explorer 9 و الإصدارات الأقدم لا تدعم التدرج.</p>
</body>
</html>
الاختبار لرؤية ‹/›

مثال على الإنترنت

يظهر المثال التالي عدة ألوان نهاية:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>دليل أساسي(oldtoolbag.com)</title>　
<style>
#grad1 {
　　　　height: 55px;
　　　　background-color: red; /* يتم عرضه عند عدم دعم المتصفح */
　　　　background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* الجملة القياسية (يجب أن تكون في النهاية) */
}
</style>
</head>
<body>
<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
خلفية التدرج
</div>
<p><strong>ملاحظة:</strong> لا يدعم Internet Explorer 8 وأحدث إصداراته التدرج.</p>
</body>
</html>
الاختبار لرؤية ‹/›

مثال على الإنترنت

استخدمت المثال التالي الشفافية:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>دليل أساسي(oldtoolbag.com)</title>　
<style>
#grad1 {
　　　　height: 200px;
　　　　background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>
<h3>التدرج الخطي - الشفافية</h3>
<p>لإضافة الشفافية، نستخدم دالة rgba() لتعريف نقاط الألوان. يمكن أن يكون آخر معامل دالة rgba() قيمة من 0 إلى 1، ويحدد شفافية اللون: 0 يعني شفافية كاملة، 1 يعني غير شفاف.</p>
<div id="grad1"></div>
<p><strong>ملاحظة:</strong> لا يدعم Internet Explorer 8 وأحدث إصداراته التدرج.</p>
</body>
</html>
الاختبار لرؤية ‹/›

دليل CSS: تدرج CSS3

وظائف CSS

قاعدة CSS @charsetوظائف CSS