إنشاء حدود متعددة الألوان باستخدام CSS

نشرت: 2022-02-16

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

صلب

سوليدبور

متقطع

متشعب

منقط

منقط

حدود متعددة الألوان

متعدد الألوان 1

متعدد الألوان 2

لتحقيق حد متعدد الألوان كما هو موضح أعلاه ، سنستخدم خاصية position والمحدد ::after بتدرج لوني. أولاً ، سننشئ منطقة رأس باستخدام فئة HTML <div> ثم نصممها باستخدام CSS للحصول على حد متعدد الألوان يقسمها والمحتوى أدناه.

قم بإنشاء HTML الخاص بك:

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>
فتح في المنبثقة
 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

الآن ، دعنا نصممها قليلاً باستخدام CSS.

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }
فتح في المنبثقة
 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

يجب أن يكون لديك الآن شيء يشبه هذا:

إنشاء حدود متعددة الألوان باستخدام CSS

باستخدام ذلك ، يمكننا الآن إضافة ::after إلى .ost-multi-header selector . ولكن ، قبل أن نفعل ذلك ، أود أن أشرح القليل مما يفعله ::after ولماذا نحتاج إلى خاصية الموضع للحد متعدد الألوان. ينشئ ::after عنصرًا زائفًا مع كل ما هو موجود في خاصية المحتوى في نهاية العنصر المحدد. في حالتنا ، هذا العنصر هو .ost-multi-header . دعونا نجعل "أهلاً بالعالم!" مثال لتوضيح.

أضف هذا إلى CSS الخاص بك:

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }
فتح في المنبثقة
 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

هيدربور

كما ترى ، لدينا الآن "Hello World!" عنصر أسفل عنوان الرأس. نظرًا لأن العنصر الأصل ، .ost-multi-header ، له خاصية الموضع relative ، يمكننا إعطاء عنصر فرعي موضعًا absolute . سيسمح لنا هذا بنقل العنصر الزائف الجديد الذي أنشأناه باستخدام ::after أينما أحبنا داخل العنصر الأصل بسهولة. نضعه في الأسفل وننقله أكثر من 20 بكسل من اليسار داخل العنصر الأصل. لاحظ أنه إذا لم يتم تعيين خاصية الموضع للعنصر الأصل على نسبي ، فسيكون العنصر المطلق الموضع لدينا في الجزء السفلي و 20 بكسل على يسار منفذ عرض المتصفح.

ماذا عن حدودنا الملونة؟ سنقوم بتصميم خلفية العنصر الزائف لتكون حدودنا متعددة الألوان باستخدام التدرج اللوني. يمكن أن تكون تدرجات CSS خطية أو نصف قطرية. بالنسبة لحدودنا ، سنستخدم linear-gradient . بكل بساطة ، سيعطينا هذا الحدود التي نسعى إليها.

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }
فتح في المنبثقة
 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

لكن ، دعنا نبطئ لحظة خطوة بخطوة. أولاً ، لا تزال خاصية content موجودة على الرغم من أنها فارغة. هذا لأنه بدون خاصية content ، لا يتم أبدًا إنشاء العنصر الزائف ؛ لذلك نحن في حاجة إليها. نحتاج إلى ضبط ارتفاع العنصر الزائف ، ارتفاع الحد. لماذا يتم تعيين كل من الخصائص right left 0؟ بدون عرض محدد ، سيؤدي هذا إلى تمدد العنصر الزائف ليكون عرضًا بنسبة 100٪ داخل العنصر الأصل. قد يبدو الأمر كثيرًا ، لكن إعدادات linear-gradient تخبر اللون فقط بالتدفق من اليسار "إلى اليمين" ، ونضع الألوان التي نريدها بنسب مئوية معينة من الخلفية.

على الرغم من أن كل ما نقوم به هو اختيار الألوان التي يجب أن تكون بنسب مئوية محددة ، إلا أنه يتطلب الكثير من العمل على الساق. لحسن الحظ ، هناك موارد مجانية عبر الإنترنت تساعد بشكل كبير في تدرجات الألوان. Ultimate CSS Gradient Generator بواسطة ColorZilla هي أداة رائعة تتضمن خصائص تدرج متعددة لدعم المتصفحات القديمة.

لدينا تدرج إعداد بالفعل على الأداة ، لذا يمكننا استخدام هذا الرابط لمعرفة الإعدادات الدقيقة المستخدمة في هذا البرنامج التعليمي: https://colorzilla.com/gradient-editor/#ed8034+0،ed8034+33،feb123+33 ، feb123 + 66،2184cd + 66،2184cd + 100. يجب أن تبدو هذه:

إنشاء حدود متعددة الألوان باستخدام CSS

هناك الكثير من الإعدادات على هذا الموقع ، ولكن دعونا نركز على الإعدادات التي نحتاجها لإنشاء المظهر الذي سنستخدمه لحدودنا. دعنا نقسمها:

إنشاء حدود متعددة الألوان باستخدام CSS

  1. الإعدادات المسبقة - يمكن أن تكون نقطة انطلاق رائعة!
  2. شريط التمرير - يمكنك إضافة الألوان وإزالتها وتحريرها هنا
  3. التوقفات - يسمح لك هذا القسم بتغيير الإعدادات الخاصة بعتامة كل لون وموقعه. ما عليك سوى النقر فوق مربع اللون في شريط التمرير أعلاه لتغيير المربع الذي تتحكم فيه في هذا القسم.
  4. معاينة - هنا يمكنك رؤية نتائج التغييرات التي أجريتها على الفور.
  5. الاتجاه والحجم - يسمح لك هذا بالتغيير من الأفقي أو الرأسي أو القطري أو الشعاعي. ولضبط حجم التدرج اللوني.
  6. كود CSS - الكود الذي تم إنشاؤه باستخدام رابط ثابت بحيث يمكنك دائمًا الرجوع وتعديل التدرج اللوني بسهولة.

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

إنشاء حدود متعددة الألوان باستخدام CSS

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

نسخة

إذا قمت بنسخ الكود كما هو موجود في الرابط ، فإن CSS النهائي الخاص بك سيبدو كما يلي:

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }
فتح في المنبثقة
 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

وستنتج CSS هذا التسطير متعدد الألوان الذي يستجيب بشكل كامل:

إنشاء حدود متعددة الألوان باستخدام CSS

هناك نذهب! لم يكن علينا إضافة مساحة 6 بكسل إلى أسفل .ost-multi-header ، لكن الطفل ذي الموضع absolute لم يعد يؤثر على ارتفاع العنصر الأصل. يمكننا تركه يطفو فوق المحتوى الخاص بنا في العنصر الرئيسي ، أو إضافة padding للتأكد من أنه لا يغطي أي محتوى قد لا نريد إعاقته.

إليك رابط لهذا التمرين المعاد إنشاؤه على CodePen ليتمكن الجميع من تحريره والتعلم دون قلق.

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