English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
يتيح لك ميزة التدرج الخطي في CSS3 إنشاء تدرج من لون إلى آخر دون الحاجة إلى أي صورة.
يقدم CSS3 ميزة التدرج خطي حلاً مرنًا يمكنه إنشاء انتقال سلس بين لونين أو أكثر. من أجل الوصول إلى هذا التأثير، يجب استخدام الصور. يمكن استخدام CSS3 لتدرج الخطي لتقليل وقت التحميل واستخدام النطاق الترددي. يمكن تضخيم عنصر التدرج إلى أي حجم بنسبة، دون فقدان الجودة، وسيتم تحميله بشكل أسرع لأنه يتم إنشاؤه بواسطة المتصفح.
تدرج الخطي لديه نوعان:خطي (linear) وتدرج دائري(radial).
لإنشاء تدرج خطي، يجب عليك تحديد على الأقل لونين. ولكن، لإنشاء تأثيرات تدرج أكثر تعقيدًا، يمكنك تحديد المزيد من اللونين. اللون هو اللون الذي تريد تقديمه بشكل سلس. يمكنك أيضًا تعيين نقطة البداية واتجاه التدرج (أو الزاوية). يمكن تقديم النحو الأساسي لتدرج الخطي في CSS3 عبر الطريقة التالية:
linear-gradient(angle، color-stop1، color-stop2، ...)
الامثلة التالية ستقوم بإنشاء تدرج خطي من الاعلى إلى الاسفل. هذا هو القيمة الافتراضية.
.gradient {
/* مبدأ التراجع للبrowsers التي لا تدعم التدرجات */
background: red;
/* للإصدار Safari 5.1 إلى 6.0 */
background: تنسيق التدرج الخطي (red, yellow);
/* للإصدار Internet Explorer 10 */
background: تنسيق التدرج الخطي (red, yellow);
background: تنسيق التدرج الخطي (red, yellow);
}اختبار لرؤية‹/›الامثلة التالية ستقوم بإنشاء تدرج خطي من اليسار إلى اليمين.
.gradient {
/* مبدأ التراجع للبrowsers التي لا تدعم التدرجات */
background: red;
/* للإصدار Safari 5.1 إلى 6.0 */
background: تنسيق التدرج الخطي (left, red, yellow);
/* للإصدار Internet Explorer 10 */
background: تنسيق التدرج الخطي (left, red, yellow);
background: تنسيق التدرج الخطي (to right, red, yellow);
}اختبار لرؤية‹/›يمكنك أيضًا إنشاء تدرج بطريقة مائلة. على سبيل المثال، سأوضح لك كيفية إنشاء تدرج خطي من الزاوية السفلية اليسرى إلى الزاوية العلوية اليمنى للعنصر.
.gradient {
/* مبدأ التراجع للبrowsers التي لا تدعم التدرجات */
background: red;
/* للإصدار Safari 5.1 إلى 6.0 */
background: -webkit-linear-gradient(bottom left، أحمر، أصفر);
/* للإصدار Internet Explorer 10 */
background: -ms-linear-gradient(bottom left، أحمر، أصفر);
background: linear-gradient(to top right، أحمر، أصفر);
}اختبار لرؤية‹/›إذا كنت ترغب في تحديد اتجاه التدرج بشكل دقيق، يمكنك تعيين الزاوية بدلاً من الكلمات المفتاحية المسبقة. الزاوية 0deg تُنتج تدرج من الأسفل إلى الأعلى، والزاوية الإيجابية تعني دورانًا متجهًا باتجاه الساعة، مما يعني أن الزاوية 90deg تنتج تدرج من اليسار إلى اليمين. يمكن تقديم النحو الأساسي لإنشاء تدرج خطي باستخدام الزاوية كالتالي:
linear-gradient(angle، color-stop1، color-stop2، ...)
في هذا المثال، سيتم إنشاء تدرج خطي من اليسار إلى اليمين باستخدام الزاوية.
.gradient {
/* مبدأ التراجع للبrowsers التي لا تدعم التدرجات */
background: red;
/* للإصدار Safari 5.1 إلى 6.0 */
background: -webkit-linear-gradient(0deg، أحمر، أصفر);
/* للإصدار Internet Explorer 10 */
background: -ms-linear-gradient(0deg، أحمر، أصفر);
background: linear-gradient(90deg، أحمر، أصفر);
}اختبار لرؤية‹/›يمكنك أيضًا إنشاء تدرج لعدة ألوان. على سبيل المثال، سأوضح لك كيفية إنشاء تدرج خطي باستخدام عدة نقاط مميزة. يتم توزيع الألوان بشكل متساوٍ.
.gradient {
/* مبدأ التراجع للبrowsers التي لا تدعم التدرجات */
background: red;
/* للإصدار Safari 5.1 إلى 6.0 */
background: -webkit-linear-gradient(أحمر، أصفر، أخضر خضراء);
/* للإصدار Internet Explorer 10 */
background: -ms-linear-gradient(أحمر، أصفر، أخضر خضراء);
background: linear-gradient(أحمر، أصفر، أخضر خضراء);
}اختبار لرؤية‹/›النقاط المميزة لللون هي على خط التدرج، حيث سيكون اللون المحدد في هذا الموضع. يمكن تحديد موقع النقاط المميزة كنسبة مئوية أو طول مطلق. يمكنك تحديد العديد من النقاط المميزة حسب الحاجة لتحقيق التأثير المطلوب.
.gradient {
/* مبدأ التراجع للبrowsers التي لا تدعم التدرجات */
background: red;
/* للإصدار Safari 5.1 إلى 6.0 */
background: -webkit-linear-gradient(أحمر، أصفر 30%， أخضر خضراء 60%);
/* للإصدار Internet Explorer 10 */
background: -ms-linear-gradient(red, yellow 30%, lime 60%);
background: linear-gradient(red, yellow 30%, lime 60%);
}اختبار لرؤية‹/›ملاحظة:عند تحديد موقع التوقف لللون كنسبة مئوية، يمثل 0% البداية و100% النهاية. ولكن يمكنك استخدام قيم خارج هذا النطاق، أي قبل 0% أو بعد 100% للحصول على التأثير المطلوب.
يمكنك استخدام دالة repeating-linear-gradient() لتكرار التدرج الخطي.
.gradient {
/* مبدأ التراجع للبrowsers التي لا تدعم التدرجات */
background: white;
/* للإصدار Safari 5.1 إلى 6.0 */
background: -webkit-repeating-linear-gradient(black, white 10%, lime 20%);
/* للإصدار Internet Explorer 10 */
background: -ms-repeating-linear-gradient(black, white 10%, lime 20%);
background: repeating-linear-gradient(black, white 10%, lime 20%);
}اختبار لرؤية‹/›في التدرج المتناوب، تظهر الألوان من نقطة واحدة وتتوزع بشكل متساوٍ على شكل دائري أو بيضاوي، وليس كما في التدرج الخطي حيث تتدرج الألوان من لون إلى آخر في اتجاه واحد. يمكن تقديم بناء جملة التدرج المتناوب الأساسي بالشكل التالي:
radial-gradient(shape size at position, color-stop1, color-stop2, ...);
معاني أ参数 الخاصة بـ radial-gradient() هي كالتالي:
position —تحديد نقطة البداية للتدرج، يمكن تحديد النقطة بالوحدات (px،em أو المئة) أو بكلمات مفتاحية (left،bottom وما إلى ذلك).
shape —تحديد شكل التدرج النهائي. يمكن أن يكون دائريًا أو بيضاويًا.
size —تحديد حجم شكل التدرج النهائي. القيمة الافتراضية هي farthest-side.
النموذج التالي سيظهر لك إنشاء التدرج المتناوب بالألوان المميزة بتنسيق متساوٍ.
.gradient {
/* مبدأ التراجع للبrowsers التي لا تدعم التدرجات */
background: red;
/* للإصدار Safari 5.1 إلى 6.0 */
background: -webkit-radial-gradient(red, yellow, lime);
/* للإصدار Internet Explorer 10 */
background: radial-gradient(red, yellow, lime);
background: radial-gradient(red, yellow, lime);
}اختبار لرؤية‹/›يستخدم معامل shape في وظيفة radial-gradient() لتحديد شكل التدرج النهائي. يمكن أن يأخذ القيم circle أو ellipse. إليك مثال:
.gradient {
/* مبدأ التراجع للبrowsers التي لا تدعم التدرجات */
background: red;
/* للإصدار Safari 5.1 إلى 6.0 */
background: -webkit-radial-gradient(circle, red, yellow, lime);
/* للإصدار Internet Explorer 10 */
background: -ms-radial-gradient(circle, red, yellow, lime);
background: radial-gradient(circle, red, yellow, lime);
}اختبار لرؤية‹/›ملاحظة:إذا تم تجاهل أو عدم تحديد معامل shape، وإذا كان الحجم طولًا واحدًا، فإن الشكل النهائي ينتهي، ويكون افتراضيًا دائريًا، وإلا يكون بيضاويًا.
يستخدم معامل size في وظيفة radial-gradient() لتحديد حجم شكل التدرج النهائي. يمكن تعيين الحجم باستخدام وحدة أو الكلمة المفتاحية: closest-side،farthest-side،closest-corner،farthest-corner.
.gradient {
/* مبدأ التراجع للبrowsers التي لا تدعم التدرجات */
background: red;
/* للإصدار Safari 5.1 إلى 6.0 */
background: -webkit-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
/* للإصدار Internet Explorer 10 */
background: -ms-radial-gradient(left bottom, circle farthest-side, red, yellow, lime);
background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);
}اختبار لرؤية‹/›يمكنك أيضًا استخدام وظيفة repeating-radial-gradient() لإعادة تكرار التدرج الدائري.
.gradient {
/* مبدأ التراجع للبrowsers التي لا تدعم التدرجات */
background: white;
/* للإصدار Safari 5.1 إلى 6.0 */
background: -webkit-repeating-radial-gradient(black, white 10%, lime 20%);
/* للإصدار Internet Explorer 10 */
background: -ms-repeating-radial-gradient(black, white 10%, lime 20%);
background: repeating-radial-gradient(black, white 10%, lime 20%);
}اختبار لرؤية‹/›يدعم CSS3 التدرجاتشفافية، تدرجعديد من الخلفيات، يمكنك استخدامها لإنشاء تأثير تدريجي للخلفية الصور.
.gradient {
/* مبدأ التراجع للبrowsers التي لا تدعم التدرجات */
background: url("images/sky.jpg");
/* للإصدار Safari 5.1 إلى 6.0 */
background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
/* للإصدار Internet Explorer 10 */
background: -ms-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url("images/sky.jpg");
}اختبار لرؤية‹/›