خلفية متدرجة. التدرج الخطي (): التدرج الخطي في الخلفية

عندما نتحدث عن التدرجات في CSS، فإننا نتحدث عن التدرجات الملونة.

هناك نوعان من التدرجات في CSS:

  • خطي: الألوان تنتقل من نقطة إلى أخرى، على طول مستقيمخطوط؛
  • شعاعي: الألوان تنتقل من مركز الدائرة إلى حوافها الجميعالاتجاهات.

يعتبر التدرج الصورة الخلفية ويجب استخدامه مع الخاصية المناسبة.

الخطي التدرج

إن بناء جملة التدرجات الخطية معقد للغاية، ولكن الفكرة الأساسية هي كما يلي:

  • تحديد المطلوب الألوان;
  • حيث يجب أن تظهر هذه الألوان على طول المحور(في البداية، الوسط، النهاية، وما إلى ذلك)؛
  • بحيث اتجاهيجب أن يكون هناك التدرج.

لنبدأ بتدرج بسيط من اللونين:

Div (صورة الخلفية: التدرج الخطي (الأحمر والأزرق)؛)

تدرج بسيط للخلفية العمودية.

تقصير:

  • الاتجاه الرأسي، من أعلى إلى أسفل؛
  • أولاًاللون في بداية(أعلى)؛
  • ثانيةاللون في نهاية(في الأسفل).

تغيير الاتجاه

إذا كان الاتجاه من أعلى إلى أسفل لا يناسبك، يمكنك تغييره إلى أحد الخيارات:

  • يُعرِّف مهمة التدرج, وذلك باستخدام الكلمات الرئيسية مثل إلى أعلى اليسار ;
  • تحديد محددة ركنبالدرجات، مثل 45 درجة.

ويجب تحديد هذا الاتجاه قبللون:

Div ( صورة الخلفية: تدرج خطي (أسفل اليمين، أصفر، أرجواني)؛ العرض: 200 بكسل؛ )

التدرج القطري من اليسار الزاوية العليافي الزاوية اليمنى السفلى.

إذا كنت تريد أن تسأل زاوية محددة، ثم يمكنك استخدام القيمة in درجات:

  • 0 درجة - من الأسفل إلى الأعلى؛
  • 20 درجة - قطريًا قليلاً، في اتجاه عقارب الساعة؛
  • 90 درجة - مثل الساعة 15، من اليسار إلى اليمين؛
  • 180 درجة هي القيمة الافتراضية، من الأعلى إلى الأسفل.

Div ( صورة الخلفية: تدرج خطي (20 درجة، أخضر، أزرق)؛ العرض: 150 بكسل؛ )

التدرج القطري بزاوية 20 درجة.

إضافة المزيد من الألوان

يمكنك إدراج العديد من الألوان كما تريد. سيفعلون وزعت بالتساويعلى طول المحور:

  • لونان: 0% و 100%
  • ثلاثة ألوان: 0%، 50%، 100%
  • أربعة ألوان: 0%، 33%، 67%، 100%

Div ( صورة الخلفية: تدرج خطي (برتقالي، رمادي، أصفر)؛ العرض: 150 بكسل؛ )

تدرج قبيح تمامًا، لكن الفكرة مهمة هنا.

تحديد نقاط لون محددة

إذا كنت لا تريد توزيع اللون بالتساوي، يمكنك ضبطه مواضع ألوان معينةباستخدام النسب المئوية (%) أو البكسل (px):

Div ( صورة الخلفية: تدرج خطي (برتقالي، رمادي 10%، أصفر 50%)؛ العرض: 150 بكسل؛ )

وهو أيضًا تدرج قبيح، لكن الفكرة مهمة هنا.

في هذه المعلمات:

  • لم يتم تحديد موضع اللون البرتقالي، وبالتالي فإن القيمة الافتراضية هي 0%؛
  • ويكون اللون الرمادي أقرب إلى الأعلى بنسبة 10% بدلاً من 50%؛
  • ويحتل اللون الأصفر نصف التدرج، من 50% إلى نهاية 100%.

شعاعي التدرج

بينما تتبع التدرجات الخطية محورًا واحدًا، التدرجات الشعاعيةتنتشر في كل الاتجاهات. بناء الجملة الخاص بهم يشبه إلى حد كبير التدرجات الخطية، حيث أن كلاهما لديه نقاط من اللون. ولكن بدلاً من تحديد الاتجاه، عليك تحديد:

  • استمارة: دائرة أو قطع ناقص؛
  • نقطة البداية: الذي سيكون مركز الدائرة أو القطع الناقص؛
  • نقطة النهاية: حيث ستكون حافة الدائرة أو القطع الناقص.

Div (صورة الخلفية: تدرج شعاعي (أحمر، أصفر)؛ الحشو: 1rem؛ العرض: 300 بكسل؛)

إنها تشبه الشمس كثيرًا، أليس كذلك؟

تقصير:

  • التدرج هو الشكل البيضاوي;
  • اللون الأول يبدأ في مركز;
  • اللون الأخير ينتهي في الزاوية الأبعد.

موقف البداية

موقف البدايةيعمل مثل موقف الخلفية . يمكنك تثبيته عن طريق الكلمة الرئيسيةفي.

Div ( صورة الخلفية: تدرج شعاعي (في أعلى اليمين، أسود، رمادي فاتح)؛ الحشو: 1rem؛ العرض: 300 بكسل؛ )

يوم كئيب.

موقف النهاية

بشكل افتراضي، ينتهي النموذج عند الزاوية الأبعد. يمكنك اختيار:

  • الجانب الأقرب
  • الزاوية الأقرب
  • الجانب الأبعد
  • الزاوية الأبعد

Div ( صورة الخلفية: تدرج شعاعي (الزاوية الأقرب عند 20 بكسل 20 بكسل، أخضر، أزرق)؛ الحشو: 1ريم؛ العرض: 300 بكسل؛) div: تحويم ( صورة الخلفية: التدرج الشعاعي (الجانب الأبعد عند 20 بكسل 20 بكسل، الأخضر والأزرق)

حرك مؤشر الفأرة فوق هذا النجم الأخضر في السماء لترى كيف يتوسع.

حجم ثابت

بدلاً من تحديد موضعي البداية والنهاية، يمكنك ببساطة التعيين أحجام محددة:

Div ( صورة الخلفية: تدرج شعاعي (20 بكسل 10 بكسل بنسبة 75% 50%، بنفسجي داكن، وردي)؛ الحشو: 1ريم؛ العرض: 300 بكسل؛ )

قرص أرجواني صغير في بحر وردي.

تعتبر التدرجات في CSS قوية عدد لا حصر لهخيارات.

تتيح لك تدرجات CSS إنشاء خلفية من لونين أو أكثر تنتقل بسلاسة من لون إلى آخر. لقد كانوا معنا لفترة طويلة، ويتمتعون بدعم متصفح جيد جدًا. معظم المتصفحات الحديثة تفهمها بدون بادئات، بالنسبة لـ IE9 والإصدارات الأقدم يوجد مرشح متدرج، وبالنسبة لـ IE9 يمكنك استخدام SVG.

يمكن استخدام التدرجات في أي مكان يتم فيه استخدام الصور: في الخلفيات، مثل القائمة النقطية، يمكن تحديدها في content أو border-image .

الخطي التدرج

التدرجات الخطية سهلة الاستخدام للغاية. للحصول على التدرج الأساسي، فقط قم بتعيين ألوان البداية والنهاية:

الخلفية: متدرج خطي (برتقالي، ذهبي)؛

يمكن أن يكون هناك أي عدد من الألوان أكثر من اثنين. يمكنك أيضًا التحكم في اتجاه التدرج وحدود (نقاط التوقف) للألوان.

يمكن تحديد الاتجاه بالدرجات أو الكلمات الرئيسية.

الكلمات الدالة:إلى الأعلى = 0 درجة؛ إلى اليمين = 90 درجة؛ إلى الأسفل = 180 درجة - القيمة الافتراضية؛ إلى اليسار = 270 درجة.

يمكن دمج الكلمات الرئيسية لإنشاء تدرج قطري، مثل أعلى اليسار.

يمكنك أدناه رؤية كيفية عمل الاتجاهات المختلفة في التمدد من اللون الأرجواني إلى اللون الأصفر:

إليك رمز المربع الأول، على سبيل المثال:

أعلى اليسار ( الخلفية: تدرج خطي (إلى أعلى اليسار، أرجواني، قرمزي، برتقالي أحمر، ذهبي)؛ )

شيء واحد يجب تذكره هو أن أعلى اليمين ليس مثل 45deg. الألوان المتدرجة تكون متعامدة مع خط اتجاه التدرج. من أعلى اليمين، ينتقل الخط من أسفل اليسار إلى الزاوية اليمنى العليا، بزاوية 45 درجة - وهو يقع بدقة في هذه الزاوية، بغض النظر عن حجم الشكل.

الفرق واضح في الأشكال المستطيلة:

يمكنك أيضًا تعيين نقاط توقف للألوان المتدرجة؛ ويتم تحديد القيم بوحدات أو نسب مئوية ويمكن أن تكون أكبر من 100% وأقل من 0%.

أمثلة على ضبط القيم في % و em والقيم التي تتجاوز حدود العنصر:

كلما اقتربت نقاط التوقف للألوان المجاورة، كلما أصبحت الحدود بينهما أكثر وضوحًا. بهذه الطريقة يمكنك بسهولة إنشاء خلفيات مخططة:

هذه هي الطريقة التي يمكنك بها، على سبيل المثال، إنشاء خلفية لعمود جانبي، ممتدة إلى ارتفاع العنصر الأصلي بالكامل:

الخطوط الموجودة على خلفية الشريط الجانبي هي تدرج آخر يتكون من شفافية كاملة متناوبة و أبيضمع الشفافية 30%. تعتبر التدرجات ذات الألوان الشفافة ملائمة لأنه يمكن تطبيقها على خلفية من أي لون.

تم تعيين التدرج في المثال في رمز طويل ومعقد لأنه يجب وضع الخطوط فقط فوق خلفية الشريط الجانبي. إذا لم تحاول جعل كل شيء خلفية لكتلة واحدة، فيمكنك حل المشكلة باستخدام عنصر زائف.

إذا لم تكن هناك قيود، يمكن أن يكون الرمز أقصر بكثير:

فاتح (الخلفية: تدرج خطي بلون الخوخ (90 درجة، rgba(255، 255، 255، 0) 50%، rgba(255، 255، 255، .4) 50%) المركز المركزي / 2em؛ ) .داكن (الخلفية: أزرق فولاذي التدرج الخطي (rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%) المركز المركزي / 100% 1em )

في السطر الأول وضعنا لون الخلفيةالعنصر والنوع والاتجاه (يمكن حذف اللون والاتجاه)، في الثانية - نحدد ألوان التدرج والحدود بينهما، في الثالثة - نحدد موضع وحجم الصورة الناتجة. الجزء الأكثر أهمية هو الحجم. بشكل افتراضي، يتم تكرار الخلفية، وبالتالي فإن النمط الناتج سوف يملأ خلفية العنصر. سهل جدا ومفهوم :)

يمكن إجراء الإدخال بالكامل في سطر واحد، ولكن من أجل سهولة القراءة يكون من الملائم أكثر الكتابة في عدة سطر، خاصة بالنسبة للتدرجات المعقدة.

من المهم أيضًا معرفة أن الكلمة الأساسية الشفافة تعني الأسود الشفاف، وليس الأبيض الشفاف، لذلك إذا كنت تستخدمها في Firefox فقد ينتهي بك الأمر إلى شيء مثل هذا:

لتجنب ذلك، استخدم ألوانًا شفافة تمامًا للظل المرغوب، على سبيل المثال، الأبيض: rgba(255, 255, 255, 0) أو black rgba(0, 0, 0, 0) . عن طرق مختلفةيمكنك قراءة الألوان لضبطها.

لمعرفة تدوين rgb للون معين، يمكنك استخدامه CSS.coloratum، أداة من ليا فيرو.

بالإضافة إلى التدرج الخطي المعتاد، يمكنك إنشاء تدرج خطي متكرر - تدرج متكرر

عينة من الرموز:

الخلفية: تكرار التدرج الخطي (أخضر، أخضر .5em، شفاف .5em، شفاف 1em)؛

لسوء الحظ، تتصرف التدرجات المتكررة بشكل عشوائي وهي مناسبة فقط للأنماط التي لا تهتم بالدقة. إذا كنت بحاجة إلى الدقة، فاستخدم التدرج الخطي مع حجم الخلفية وتكرار الخلفية .

التدرجات لها نفس القيود مثل مربع الظل: لا يمكن إعطاؤها ألوانًا أو اتجاهًا فرديًا. يؤدي هذا إلى تكرار التعليمات البرمجية والحاجة الملحة لاستخدام المعالجات المسبقة عند إنشاء تدرجات معقدة.

هناك قيد آخر يتمثل في أن التدرجات ليست متحركة، ومع ذلك، يمكن التغلب عليها إلى حد ما.

ل الخلق السريعهناك الكثير من التدرجات عبر المتصفحات أداة سهلة الاستخدام: colorzilla.com/gradient-editor/. بالإضافة إلى التعليمات البرمجية للمتصفحات الحديثة، فإنه سيقدم تعليمات برمجية لـ IE وSVG الأقدم للإصدار التاسع.

بالاشتراك مع القدرات الأساسيةإدارة صور الخلفيةالتدرجات تعطي أوسع الفرصلإنشاء خلفيات بدرجات متفاوتة من التعقيد دون استخدام الصور على الإطلاق. يمكنك استخدام التدرجات لإنشاء أنماط معقدة ومثيرة للاهتمام، ولكن هذا موضوع مختلف تمامًا.

التدرج اللوني هو الانتقال السلسمن واحد اللون المحددإلى أخرى من خلال الألوان المتوسطة. في التدرج الخطي، يحدث الانتقال في خط مستقيم، من النقطة أالى حد، الى درجة ب. يمكن أن يحتوي التدرج على أكثر من نقطتين مرجعيتين - ثم يتم الانتقال من النقطة أالى حد، الى درجة ب، ثم من النقطة بالى حد، الى درجة جوما إلى ذلك وهلم جرا.

كيفية عمل تدرج خطي للخلفية في CSS

في CSS3 يمكنك إضافة خلفية متدرجةللعناصر من خلال بالفعل خاصية معروفةالصورة الخلفية. القيمة هي الكلمة الأساسية الخطية التدرج () حيث تحتاج بين قوسين إلى تحديد نقطة بداية التدرج ولون البداية ولون النهاية.

على سبيل المثال، لنقم بإنشاء تدرج خطي للخلفية يمتد من اللون الأرجواني إلى اللون الأحمر. في هذه الحالة، نريد أن تكون نقطة البداية باللون الأرجواني مع الجانب الأيمن، وتم توجيه متجه التدرج إلى اليسار. لنكتب الكود:

صورة الخلفية: تدرج خطي (إلى اليسار، بنفسجي، أحمر)؛ تدرج الخلفية على الكتلة

400 × 400 بكسل

يمكن كتابة ألوان نقاط التدرج بأي تنسيق متاح في CSS، سواء كان ذلك رمز سداسي عشري, تنسيق RGBأو غيرها. يتم تحديد اتجاه التدرج باستخدام البادئة to ثم الكلمات الأساسية left و right وtop و Bottom، والتي يمكن دمجها لتغيير الميل. على سبيل المثال:

صورة الخلفية: تدرج خطي (أسفل اليمين، #ee82ee، #ff0000)؛

بالإضافة إلى ذلك، يمكنك تحديد زاوية الميل مباشرة باستخدام الموجب أو رقم سلبيمع البادئة deg (بدون مسافة). عند زاوية معينة تبلغ 0 درجة أو 360 درجة، سينتقل خط التدرج من الأسفل إلى الأعلى. مع زيادة زاوية الميل، يتحرك المتجه في اتجاه عقارب الساعة (باستخدام قيمة سالبة يعكس الحركة). مثال لإدخال الكود:

صورة الخلفية: تدرج خطي (-110 درجة، #ee82ee، #ff0000)؛

نقاط ربط متعددة

كما قلنا سابقًا، يمكن أن يحتوي التدرج على أكثر من نقطتي ربط. في هذه الحالة، ستنتقل الخلفية بسلاسة من اللون الأول إلى الثاني، ومن الثاني إلى الثالث، ومن الثالث إلى الرابع، وهكذا حتى تصل إلى النقطة المرجعية النهائية. إذا كنت تريد زيادة عدد هذه النقاط في التدرج، فما عليك سوى إضافتها مفصولة بفواصل. على سبيل المثال:

صورة الخلفية: تدرج خطي (145 درجة، #ee82ee، slateblue، #ffd86a، أرجواني)؛

في مثالنا، تمت الإشارة إلى أربع نقاط ألوان مرجعية، ولكن يمكنك إضافة العدد الذي تريده وبأي تنسيقات ألوان متاحة.

طول الفترة الانتقالية

افتراضيًا، يضع المتصفح النقاط على مسافات متساوية، وبالتالي يكون التدرج موحدًا. ولكن يمكن التحكم في هذه المسافة باستخدام الوحدات أبعاد CSS. لننظر إلى المثال التالي:

صورة الخلفية: تدرج خطي (#92009b 20%, #f5e944 90%, #00ffa2);

في الكود الخاص بنا، بعد اللون #92009b تتم الإشارة إلى القيمة 20%. نظرًا لأنه قريب من نقطة الربط الأولى، فهذا يعني أنه سيتم طلاء 20% من طول العنصر باللون المحدد. وبعد ذلك يبدأ التدرج: قيمة 90% تخبر المتصفح بالوصول إلى اللون #f5e944 بنسبة 90% من طول العنصر (بدءًا من 20%). وبعد ذلك يبدأ الانتقال إلى اللون الثالث في المساحة المتبقية - #00ffa2.

يتطلب هذا الموضوع أيضًا ممارسة. حاول إنشاء خلفية متدرجة مع نقاط ربط متعددة (أكثر من نقطتين)، والتلاعب بقيم المسافة، ومشاهدة تغيير التدرج في المتصفح.

بادئات البائع

لضمان التوافق عبر المتصفحات، يجب إلحاق بعض خصائص CSS المتأخرة ببادئات البائع - بادئات خاصة يضيفها مطورو المتصفح:

  • -webkit- - بادئة لمتصفح Chrome وSafari وAndroid؛
  • -moz- هي بادئة لمتصفح فايرفوكس؛
  • -o- هي البادئة لـ Opera.

تتطلب الخلفية المتدرجة أيضًا استخدام هذه البادئات إذا كانت هناك حاجة للدعم الحد الأقصى للكميةالمتصفحات. للقيام بذلك، قم بتعديل الكود كما يلي:

صورة الخلفية: -webkit-linear-gradient (يسار، بنفسجي، أحمر)؛ صورة الخلفية: -moz-linear-gradient (يسار، بنفسجي، أحمر)؛ صورة الخلفية: -o-linear-gradient(left, violet, red); صورة الخلفية: تدرج خطي (إلى اليسار، بنفسجي، أحمر)؛

تتطلب إضافة بادئة إنشاء إعلان منفصل. وأيضًا، كما لاحظت، الخصائص التي تحتوي على بادئات البائعين لاتتطلب استخدام البادئة to عند الإشارة إلى اتجاه التدرج.

دعم إنترنت إكسبلورر

لسوء الحظ، الخلفية المتدرجة تعمل فقط في IE10+. الإصدارات السابقةلا أفهم ذلك وسوف تجاهل ذلك. لتوفير خلفية عادية على الأقل في المتصفحات القديمة، يمكنك إنشاء ما يسمى. "Stub": حدد الظل المناسب واكتب خاصية لون الخلفية فوقخاصية مع التدرج. هكذا، المتصفح القديمسيطبق لون خلفية "احتياطيًا"، وسيتخطى الخصائص غير المعروفة له، بينما في المزيد متصفح حديثسوف تتداخل الخلفية المتدرجة وتغطي الخلفية الصلبة.

إذا كان لديك مجموعة تدرج شفافة (على سبيل المثال، باستخدام لون تنسيق RGBA) ولا تريد أن تظهر الخلفية الاحتياطية، فاضبط التدرج باستخدام خاصية الخلفية المختصرة بدلاً من صورة الخلفية . ثم سيتم استبدال قيمة لون الخلفية بالقيمة الشفافة.

مزيد من المعلومات في البرنامج التعليمي:تكرار التدرج الخطي () - تكرار التدرج الخطي.

فلاد ميرزيفيتش

التدرج هو انتقال سلس من لون إلى آخر، ويمكن أن يكون هناك عدة ألوان وانتقالات بينهما. بمساعدة التدرجات، يتم إنشاء تأثيرات تصميم الويب الأكثر غرابة، على سبيل المثال، ثلاثية الأبعاد الزائفة، والوهج، والخلفية، وما إلى ذلك. أيضًا، مع التدرج، تبدو العناصر أكثر جاذبية من العناصر أحادية اللون.

لا توجد خاصية منفصلة لإضافة التدرج اللوني، حيث أنها تعتبر صورة خلفية، لذلك تتم إضافتها من خلال خاصية صورة الخلفية أو خاصية الخلفية العامة، كما هو موضح في المثال 1.

مثال 1: التدرج

الانحدار

هنا يبدأ المصطلح الفاحش تقليديًا بالصورة النثرية، لكن اللعبة اللغوية لا تؤدي إلى فهم حواري نشط.

نتيجة هذا المثاليظهر في الشكل. 1.

أرز. 1. التدرج الخطي للفقرة

في جدا حالة بسيطةباستخدام اللونين الموضحين في المثال 1، اكتب أولاً الموضع الذي سيبدأ منه التدرج، ثم ألوان البداية والنهاية.

لتسجيل موضع، تكتب أولاً إلى ، ثم تضيف الكلمات الرئيسية أعلى، وأسفل، ويسار، ويمين، بالإضافة إلى مجموعاتها. ترتيب الكلمات ليس مهما، يمكنك الكتابة إلى أعلى اليسار أو إلى أعلى اليسار. في الجدول 1 يُظهر المواضع المختلفة ونوع التدرج الذي تم الحصول عليه للألوان #000 و#fff، وإلا من الأسود إلى الأبيض.

طاولة 1. أنواع التدرج
موضع وصف منظر
الى الاعلى 0 درجة أسفل حتى.
إلى اليسار 270 درجة من اليمين إلى اليسار.
إلى أسفل 180 درجة من أعلى إلى أسفل.
إلى اليمين 90 درجة من اليسار الى اليمين.
إلى أعلى اليسار من الزاوية اليمنى السفلى إلى الزاوية اليسرى العليا.
إلى أعلى اليمين من أسفل اليسار إلى أعلى اليمين.
إلى أسفل اليسار من الزاوية اليمنى العليا إلى أسفل اليسار.
إلى أسفل اليمين من أعلى اليسار إلى أسفل اليمين.

بدلاً من الكلمة الأساسية، يمكنك تحديد ميل خط التدرج، الذي يوضح اتجاه التدرج. أولا، يتم كتابة القيمة الموجبة أو السالبة للزاوية، ثم تضاف إليها الدرجة.

تتوافق درجة الصفر (أو 360 درجة) مع التدرج من الأسفل إلى الأعلى، ثم يكون العد التنازلي في اتجاه عقارب الساعة. تظهر زاوية ميل خط التدرج أدناه.

بالنسبة للقيم العلوية اليسرى والمشابهة، يتم حساب زاوية ميل خط التدرج بناءً على أبعاد العنصر وذلك لربط نقطتي زاوية متقابلتين قطريًا.

لإنشاء تدرجات معقدة، لن يكون هناك لونان كافيين؛ حيث يسمح لك بناء الجملة بإضافة عدد غير محدود منها، مع إدراج الألوان مفصولة بفواصل. في هذه الحالة يمكنك استخدام لون شفاف(كلمة أساسية شفافة)، وأيضًا نصف شفاف باستخدام تنسيق RGBA، كما هو موضح في المثال 2.

مثال 2: الألوان الشفافة

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

الانحدار

نشأة الشعر الحر، على الرغم من تأثيرات خارجية، يصد اللغة المعدنية اللفظية.

وتظهر نتيجة هذا المثال في الشكل. 2.

أرز. 2. التدرج مع الألوان الشفافة

لتحديد موضع الألوان بدقة في التدرج، فإن قيمة اللون يتبعها موضعها بالنسبة المئوية أو البكسل أو الوحدات الأخرى. على سبيل المثال، سجل أحمر 0%، برتقالي 50%، أصفر 100%يعني أن التدرج يبدأ باللون الأحمر، ثم البرتقالي بنسبة 50%، ثم الأصفر تمامًا. للتبسيط، يمكن حذف الوحدات المتطرفة مثل 0% و100%؛ ويتم افتراضها افتراضيًا. يوضح المثال 3 كيفية إنشاء زر تدرج حيث يتم ضبط موضع اللون الثاني من أصل ثلاثة على 36%.

مثال 3: زر التدرج

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

زر

وتظهر نتيجة هذا المثال في الشكل. 3.

أرز. 3. زر التدرج

من خلال تحديد موضع اللون، يمكنك الحصول على انتقالات حادة بين الألوان، والتي تعطي في النهاية مجموعة من الخطوط أحادية اللون. لذلك، بالنسبة للونين تحتاج إلى تحديد أربعة ألوان، اللونين الأولين متماثلان ويبدأان من 0% إلى 50%، والألوان المتبقية هي نفسها أيضًا وتستمر من 50% إلى 100%. في المثال، تمت إضافة 4 خطوط كخلفية لصفحة الويب. ونظرًا لأن القيم المتطرفة يتم استبدالها تلقائيًا، فلا يمكن تحديدها، لذا يكفي كتابة لونين فقط.

مثال 4. خطوط عادية

HTML5 CSS3 IE 9 IE 10 Cr Op Sa Fx

خطوط أفقية

يتم توضيح البرجوازية الأوروبية النموذجية والاحترام بشكل أنيق من خلال اللغة الرسمية.

وتظهر نتيجة هذا المثال في الشكل. 4. لاحظ أنه تم ضبط أحد الألوان المتدرجة على اللون الشفاف، بحيث يتغير بشكل غير مباشر من خلال لون خلفية صفحة الويب.

أرز. 4. خلفية الخطوط الأفقية

تحظى التدرجات بشعبية كبيرة بين مصممي الويب، لكن إضافتها معقدة بسبب اختلاف خصائص كل متصفح وتحديد ألوان متعددة. لتسهيل إنشاء التدرجات وإدراجها في التعليمات البرمجية، أوصي بالموقع www.colorzilla.com/gradient-editor الذي يمكنك من خلاله إعداد التدرجات بسهولة والحصول عليها فورًا الرمز المطلوب. متاح قوالب جاهزة(الإعدادات المسبقة)، عرض النتيجة (معاينة)، ضبط الألوان (التعديلات)، الكود النهائي (CSS) الذي يدعم IE من خلال المرشحات. لمن عمل بالفوتوشوب أو غيره محرر الرسوم البيانية، سيبدو إنشاء التدرجات وكأنه قطعة من الكعكة، ولكن لن يواجه الآخرون أي مشكلة في اكتشاف ذلك بسرعة. بشكل عام، أوصي به بشدة.