كيفية إضافة تدرج حد في CSS [+3 Tools]
تسمح خاصية الحدود في CSS لمصممي الويب بتحديد نمط وعرض ولون حدود العنصر.
في CSS ، يسمح التدرج اللوني للمصمم بتطبيق انتقال سلس بين لونين أو أكثر. يمكنك استخدام التدرجات اللونية لإنشاء تأثيرات مرئية مثل التظليل ومزج الألوان والملمس على العناصر الموجودة على صفحة الويب الخاصة بك.
التدرج اللوني هو خاصية CSS تسمح للمطورين بتطبيق التدرج اللوني على حدود العنصر.
ينشئ حد التدرج تأثيرًا مرئيًا حيث يتغير لون الحد من لون إلى آخر.
لماذا نستخدم حد التدرج؟
كانت تدرجات الحدود من بين ميزات التصميم المختلفة التي تم تقديمها في CSS3. هذه بعض الأسباب التي تجعلك تحصل عليه في تطبيق الويب التالي:
- التدرج اللوني للحدود مرن: يمكنك إنشاء تأثيرات معقدة ومتعددة الطبقات باستخدام حدود التدرج. هذا على عكس حدود الألوان الصلبة ، والتي تكون جامدة. وبالتالي ، تكون حدود التدرج مفيدة عند التعامل مع التخطيطات المعقدة أو الأشكال التي تتطلب تصميمات بصرية دقيقة.
- إنشاء جاذبية بصرية: باستخدام تأثير حد التدرج ، يمكنك إضافة تأثيرات بصرية لافتة للنظر إلى تصميماتك. على سبيل المثال ، يمكنك استخدام تباينات الألوان الغامقة للمساعدة في جذب الانتباه إلى عنصر معين على صفحة الويب الخاصة بك.
- توفير تكامل سلس: تسمح لك حدود التدرج بدمج الحدود بسلاسة في خلفية العنصر الخاص بك. يمنح هذا الأسلوب صفحة الويب الخاصة بك مظهرًا قويًا ومتماسكًا ، مما يُظهر تصميمًا مدروسًا جيدًا.
كيفية إضافة التدرج الحدودي في CSS
قبل أن نوضح كيفية إضافة تدرج حد ، يمكننا توضيح كيفية إضافة حد إلى عنصر HTML.
يمكننا استخدام هذا الرمز ؛
لغة البرمجة
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> <title>Document</title> </head> <body> <div class="box contains-border"> How to add a Border illustrated!!! </div> </body> </html>
CSS
.box {
width: 400px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.contains-border {
border-color: rebeccapurple;
border-style: solid;
border-width: 5px;
}
ستظهر الصفحة المعروضة على شكل:
على الرغم من أن الشفرة أعلاه لها حدود ، إلا أنها ليست جذابة للعينين لأنها فارغة. لدينا فقط حدود أرجوانية صلبة من ريبيكا بحجم 5 بكسل حول div.
يمكننا أن نجعل حدودنا جذابة باستخدام التدرجات الحدودية. توجد طرق مختلفة لإضافة تدرج حد. فيما يلي بعض من أهمها:
استخدام حدود متدرجة (تدرج خطي ، تدرج نصف قطري ، تدرج مخروطي)
سنوضح كيفية استخدام Gradient Borders بثلاث طرق مختلفة:
الخطي التدرج
ينشئ التدرج الخطي انتقالًا سلسًا بين لونين أو أكثر في خط مستقيم. يمكننا استخدام الكود التالي للتوضيح:
لغة البرمجة
<!DOCTYPE html> <html> <head> <title>Linear Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box linear-gradient"> Linear Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.linear-gradient {
border-style: solid;
border-width: 10px;
border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;
}
لقد حددنا نمط الحدود على أنه متصل ، مما يعني أن الحدود حول الصندوق عبارة عن خط متصل. عرض الحدود في الكود لدينا هو 10 بكسل.
يبدأ التدرج الخطي بـ rgb (143 ، 55 ، 0) “وينتهي بـ” rgb (66 ، 228 ، 250) “. لقد حددنا أيضًا زاوية 45 درجة. يتم ضبط عرض شريحة صورة الحدود على “1”.
ستظهر الصفحة المعروضة على شكل:
شعاعي التدرج
ينشئ التدرج الشعاعي تدرجًا دائريًا يشع من نقطة مركزية ، مما يسمح للمستخدمين بالانتقال من لون إلى آخر في عنصر صفحة الويب.
يمكننا توضيح كيفية إضافة تدرج نصف قطري باستخدام هذا الكود:
لغة البرمجة
<!DOCTYPE html> <html> <head> <title>Radial Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box radial-gradient"> Radial Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.radial-gradient {
border-style: solid;
border-width: 5px;
border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}
لقد قمنا بتعيين نمط الحدود لعنصرنا على أنه صلب. لقد أعطينا أيضًا حدنا عرضًا بقيمة 5 بكسل.
يبدأ التدرج الشعاعي باللون الأخضر الداكن RGB (0،143،104) وينتهي باللون الأصفر الساطع ، المشار إليه بواسطة rgb (250،224،66).
يمثل الرقم “1” في نهاية الكود خاصية تكرار صورة الحدود. ترشد هذه القيمة المستعرض إلى تكرار صورة الحدود مرة واحدة فقط حول حدود العنصر.
ستظهر الصفحة المعروضة على شكل:
التدرج المخروطي
يخلق التدرج المخروطي انتقالًا دائريًا للون. في هذا التأثير ، يبدأ الانتقال من نقطة مركزية ثم ينتشر للخارج ، مكونًا تأثيرًا دائريًا.
لغة البرمجة
<!DOCTYPE html> <html> <head> <title>Conic Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box conic-gradient"> Conic Gradient Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.conic-gradient {
border-style: solid;
border-width: 7.5px;
border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;
}
في هذا الكود ، قمنا بتعيين نمط الحدود على أنه صلب ومنحنا الحد عرضًا قدره 7.5 بكسل. تعيّن خاصية صورة الحدود تدرج الحدود. هناك سبعة ألوان ، تبدأ باللون الأحمر وتنتهي بـ rgb (255 ، 0 ، 38).
يعطي الشكل “1” في نهاية الكود عرض حد 1 بكسل.
ستظهر الصفحة المعروضة على شكل:
استخدام صور الحدود
تحل صور الحدود محل الحدود الصلبة القياسية لعناصر HTML. تُستخدم صور الحدود لإنشاء تصميمات معقدة بدلاً من دمج الألوان لإنشاء تدرج حد.
لغة البرمجة
<!DOCTYPE html> <html> <head> <title>Border Images Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box border-images"> Border Images Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.border-images {
border-style: solid;
border-width: 15px;
border-image-source: url(/images/elephant-2910293_1920.jpg);
border-image-slice: 60 30;
}
لقد قدمنا خاصية عرض الحدود الخاصة بنا بعرض 15 بكسل وقمنا بتعيين نمط الحدود على أنه صلب.
تعيّن شريحة صورة الحدود عرض وارتفاع مربع الحد إلى 60٪ و 30٪ على التوالي.
ستظهر الصفحة المعروضة على شكل:
استخدام خاصية الاختزال
تسمح خاصية الاختزال للمطورين بتصميم خصائص CSS فردية متعددة باستخدام سطر واحد من التعليمات البرمجية. في هذه الحالة ، نستخدم صورة الحدود لتحديد مصدر صورة الحدود وشريحة صورة الحدود.
لغة البرمجة
<!DOCTYPE html> <html> <head> <title>Shorthand Property Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box shorthand"> Shorthand Property Illustration </div> </body> </html>
CSS
.box {
width: 350px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.shorthand {
border-style: solid;
border-width: 15px;
border-image: url(/images/elephant-2910293_1920.jpg) 60 30;
}
ستظهر الصفحة المعروضة على شكل:
مولدات التدرج الحدودي CSS
تساعد مولدات التدرج اللوني للحدود CSS المطورين على إضافة تأثيرات التدرج على العناصر الموجودة في صفحة الويب. تتيح لك هذه المولدات ضبط الإعدادات ، مما يعني أنك لست مضطرًا لإنشاء كل شيء من البداية. فيما يلي بعض الأدوات التي يمكنك استخدامها:
# 1. ألوان تحويل مولد التدرج CSS
يتيح لك Converting Colors إنشاء كود CSS متدرج خطي أو شعاعي بما يصل إلى خمسة ألوان. يمكن استخدام كود التدرج اللوني CSS الذي أنشأته كحدود أو صورة خلفية للعنصر.
يمكنك القيام بما يلي مع هذا المولد ؛
- حدد ما يصل إلى خمسة ألوان واستخدمها في تدرج الحدود.
- اختر اتجاه التدرج. تحتوي الأداة على كل من التدرجات اللونية الخطية والقطرية.
- يمكنك تحديد كيفية حدوث انتقال الألوان باستخدام ميزة إيقاف اللون.
بمجرد الانتهاء من تجربة وإنشاء الكود ، يمكنك نسخه واستخدامه على موقع الويب الخاص بك.
# 2. CSS Border Gradient Generator – CSS غير مستخدم
تساعد Unused-CSS المطورين على إنشاء حدود متدرجة يمكنهم تطبيقها على عناصر الحظر دون إنشاء عناصر زائفة أو عناصر إضافية.
يمكنك القيام بما يلي ؛
- اختر من بين أنواع التدرجات اللونية المختلفة. يمكنك التبديل بسهولة بين التدرجات اللونية الشعاعية والخطية عند العمل باستخدام هذه الأداة.
- علامة التبويب معاينة. تتيح لك الأداة معاينة كيفية ظهور التدرج اللوني للحدود على صفحة الويب الخاصة بك أثناء تخصيصه.
- يتوقف اللون. تسهل هذه الأداة تحديد كيفية حدوث الانتقالات للألوان المختلفة.
- تخصيص حجم الحدود. يمكنك تخصيص حجم الحدود ونصف قطرها بسهولة باستخدام هذه الأداة.
بمجرد أن تشعر بالرضا عن الكود الذي تم إنشاؤه ، يمكنك نسخه واستخدامه في مشروعك.
# 3. مولد الحدود المتدرجة – أميت شين
تحتوي هذه الأداة على ثماني مناطق خلفية مختلفة ، مما يتيح للمطورين إنشاء تأثيرات حدود متدرجة دائرية.
يمكنك تحقيق ما يلي ؛
- إنشاء رسوم متحركة متدرجة. تتيح لك الأداة إنشاء رسوم متحركة متدرجة تنتقل بين لونين أو أكثر.
- يمكنك تضمين كود JavaScript. إذا كان العنصر القابل للتخصيص يحتاج إلى رمز JS ، فيمكنك دائمًا العثور عليه وتخصيصه من لوحة التحكم.
- المعاينة الحية. يمكنك عرض التغييرات على التعليمات البرمجية الخاصة بك أثناء تخصيصها.
يمكنك نسخ الكود ولصقه بعد تخصيص تأثيرات التدرج اللوني للحدود حسب رغبتك.
خاتمة
عند تصميم صفحات الويب الخاصة بك ، يمكنك استخدام أي من الأساليب المذكورة أعلاه لإضافة حد متدرج إلى عناصرك. قد يختلف اختيار الأسلوب بناءً على التفضيل ومستوى المهارة وطبيعة العنصر الذي تصممه.
يمكنك أيضًا استخدام أساليب مختلفة لعناصر مختلفة على نفس صفحة الويب.
تحقق من كيفية إنشاء حد مزدوج في CSS لتحسين المظهر المرئي لصفحة الويب الخاصة بك.
