6 طرق لإنشاء حد مزدوج في CSS
تعتبر الحدود أمرًا بالغ الأهمية في تصميم / تطوير الويب حيث يمكنها جذب الانتباه إلى المستخدمين أو محتوى منفصل في صفحة الويب. يمكنك استخدام اختصار الحدود عندما تريد أن تكون جميع الحدود الأربعة على عنصر HTML متطابقة.
من ناحية أخرى ، يمكنك أيضًا استخدام خصائص لون الحدود ونمط الحد وخصائص الخط الطويل لعرض الحدود لجعل كل حد مختلفًا / فريدًا. عندما تريد تحديد لون الحد ، فإننا نستخدم لون الحدود ، ونستخدم عرض الحدود لتحديد عرض الحد ، ونحدد ما إذا كان الحد سيكون متقطعًا أو مزدوجًا أو صلبًا باستخدام خاصية نمط الحدود.
يمكنك أيضًا استهداف حدود فردية باستخدام خصائص مثل بدء حظر الحدود والحد الأعلى
الحد المزدوج هو عندما يحيط خطان متوازيان بعنصر HTML. يتم فصل الخطين بفجوة يمكن تركها شفافة أو ملؤها بصورة أو بلون خلفية.
على سبيل المثال ، يمكن أن يكون لدينا زر تسجيل / تسجيل دخول محاط بحد مزدوج.
لماذا الحدود المزدوجة؟
- الفصل: يمكنك استخدام حد مزدوج لزيادة قابلية القراءة والمسح الضوئي لصفحة الويب عن طريق فصل عناصر HTML المختلفة. على سبيل المثال ، يمكن أن يكون لديك حدود مزدوجة لفصل العناصر مثل الرؤوس والنص والتذييلات على صفحة الويب.
- جاذبية بصرية: يمكنك استخدام ألوان مختلفة / متناقضة على الحدود المزدوجة لجعل العناصر المختلفة أكثر جاذبية بصريًا.
- عرض التسلسل الهرمي: يمكنك التمييز بوضوح بين العناصر المهمة والعناصر الأقل أهمية على صفحة الويب باستخدام حدود مزدوجة.
- سهولة التخصيص: يمكنك إنشاء تصميمات مخصصة وفريدة من نوعها بمساعدة الحدود المزدوجة. على سبيل المثال ، يمكنك تغيير لون أو عرض كل سطر.
- توكيد: باستخدام خاصية الحد المزدوج ، يمكنك لفت الانتباه إلى روابط أو أزرار معينة على صفحة ويب.
يمكنك استخدام الطرق التالية لإنشاء حد مزدوج في CSS.
استخدام خاصية نمط الحدود
تحدد خاصية نمط الحدود نمط الحدود الأربعة للعنصر. نستخدم الكلمة الأساسية المزدوجة لتعيين النمط في هذه الحالة. عندما نستخدم الكلمة الأساسية المزدوجة ، يتم إنشاء حشوة تلقائية بين الحدين.
لأغراض التوضيح ، سنقوم بتعيين عرض الحدود على 15 بكسل. سنختار أيضًا لون حدودنا ليكون أحمر ونشير إلى نمط الحدود على أنه مزدوج.
كود 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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2> Border Property</h2> </div> </body> </html>
كود CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border-width: 15px;
border-color: red;
border-style: double;
}
سيكون الإخراج:
استخدام دالة التدرج الخطي ()
تحدد هذه الوظيفة تدرجًا خطيًا كصورة خلفية. والنتيجة هي انتقال تدريجي بين لونين على طول خط مستقيم. نستخدم الكلمة الأساسية لتحديد نقطة البداية لخط التدرج. إذا كان الأمر غير محدد ، تكون القيمة الافتراضية هي الأسفل.
يعطي الكود أدناه مربعنا عرض حد 7 بكسل. يمكننا بعد ذلك تحديد التدرج الخطي على خاصية الخلفية لكل جانب من جوانب الصندوق.
كود 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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>linear-gradient() function</h2> </div> </body> </html>
كود CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px),
linear-gradient(to bottom, #8f0404 7px, transparent 1px),
linear-gradient(to left, #8f0404 7px, transparent 1px),
linear-gradient(to right, #8f0404 7px, transparent 1px);
}
سيكون الإخراج:
استخدام خاصية المخطط التفصيلي
المخطط التفصيلي هو خط مرسوم خارج حدود العنصر. يحقق هذا تأثير الحد المزدوج ، ويمكننا استخدام مخطط تفصيلي وحد واحد. يجب أن نستخدم offline-offset لإضافة مسافة بين خصائص الحدود والمخطط التفصيلي.
كود 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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Outline Property</h2> </div> </body> </html>
كود CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -20px;
}
ستظهر الصفحة المعروضة على النحو التالي:
استخدام خاصية box-shadow
تضيف خاصية box-shadow تأثير الظل حول إطار العنصر. يمكن أن يكون لديك تأثيرات ظل مربع متعددة مفصولة بفواصل. ابدأ بالتأكد من أن إعدادات الإزاحة والتمويه صفر ، ثم اضبط الظلال على الأحجام المناسبة.
لغة البرمجة:
<!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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Box Shadow Property</h2> </div> </body> </html>
كود CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}
ستظهر الصفحة المعروضة على النحو التالي:
استخدام خاصية مقطع الخلفية
تحدد خاصية مقطع الخلفية إلى أي مدى يجب أن تمتد الخلفية داخل العنصر. يمكن أن يكون الامتداد في مربع الحدود أو مربع الحشو أو مربع المحتوى.
كود 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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>Background-Clip Property</h2> </div> </body> </html>
كود CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 350px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: rgb(238, 152, 130);
}
ستظهر الصفحة المعروضة على النحو التالي:
باستخدام العناصر الزائفة
العناصر الزائفة ، ممثلة بـ :: before و :: after ، تسمح المحددات لمصممي الويب بتصميم أجزاء من مستند HTML دون إضافة ترميز إلى الكود.
يمكننا توضيح كيفية استخدام العناصر الزائفة لإنشاء حد مزدوج باستخدام هذا الرمز:
مستند 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" /> <title>Document</title> <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" /> </head> <body> <div class="box"> <h2>pseudo property</h2> </div> </body> </html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: flex-start;
gap: 25px;
padding: 15px;
}
div{
width: 150px;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box{
background-color: brown;
}
box{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
border-width: 6px;
border-color: green white green white;
width: 150px;
height: 100px;
}
ستظهر الصفحة المعروضة على النحو التالي:
أمثلة من العالم الحقيقي لـ CSS مزدوجة الحدود
تُستخدم خاصية CSS ذات الحدود المزدوجة في العديد من مواقع الويب. يجب أن تدمج خاصية الحدود المزدوجة مع خصائص CSS الأخرى لتحقيق أقصى استفادة منها. فيما يلي مثالان على الحدود المزدوجة في العمل ؛
زر “عربة التسوق” في أمازون
Amazon هي واحدة من أكبر الأسماء في مجال التجارة الإلكترونية. يحتوي زر عربة التسوق على CSS مزدوج الحدود للجماليات المرئية ويحث المستخدمين على التصرف.
تظهر الحدود المزدوجة عندما يمرر المستخدم الماوس فوق زر “عربة التسوق”. تظهر الحدود أيضًا عند التمرير فوق قائمة التنقل في Amazon.
أزرار Mailchimp
Mailchimp هي خدمة تسويق عبر البريد الإلكتروني تتيح للمستخدمين إنشاء الحملات وإطلاقها وتتبعها. يستخدم موقعه على شبكة الإنترنت تأثيرات مزدوجة الحدود على أقسام مختلفة. تحتوي أزرار التسجيل وتسجيل الدخول على حدود مزدوجة “لخلق” إحساس بالإلحاح أثناء تصفح المستخدمين.
يزداد سمك الحد الموجود على الجانب السفلي من هذه الأزرار عندما يقوم المستخدم بتمرير المؤشر من خلالها.
أفضل الممارسات عند استخدام تأثير CSS مزدوج الحدود
من السهل الابتعاد عند استخدام CSS مزدوج. الهدف النهائي هو التأكد من أن المستخدمين يتنقلون بسهولة والتأكيد على المجالات الرئيسية في موقعك. اتبع أفضل الممارسات التالية:
- استخدم نمطًا متسقًا: إذا كنت تستخدم حدودًا مزدوجة ، فتأكد من تناسق النمط في جميع العناصر. على سبيل المثال ، يمكن استخدام حدود مزدوجة في أزرار التنقل والحث على اتخاذ إجراء والتسجيل / تسجيل الدخول. إذا أمكن ، تأكد من أن لديك نفس الألوان وسمك الهامش عبر العناصر ذات الحدود المزدوجة.
- تأكد من أن هذه الحدود المزدوجة تعمل على أجهزة مختلفة: نحن نعيش في عالم يتصفح فيه الأشخاص مواقع الويب من الهواتف الذكية وأجهزة الكمبيوتر والأجهزة اللوحية. اختبار للتأكد من عرض حدود مزدوجة كما هو متوقع على أحجام الشاشات المختلفة.
- استخدمها باعتدال: قد تميل إلى الإفراط في استخدام تأثير CSS معين بعد اكتشافه لأول مرة. ومع ذلك ، فإن CSS المزدوجة تناسب العناصر المختلفة على صفحة الويب. استخدم هذه الخاصية فقط في المناطق التي تضيف فيها قيمة إلى التصميم.
خاتمة
لقد أبرزنا الأساليب الرئيسية التي يمكنك استخدامها لإنشاء حد مزدوج في CSS. يعتمد اختيار الأسلوب على ما تريد تحقيقه باستخدام الحدود المزدوجة وتفضيلاتك. يمكنك أن تقرر التمسك بواحد أو مجموعة من عدة أنماط مزدوجة الحدود في نفس الصفحة.
يمكنك التحقق من موارد CSS هذه لفهم أوراق الأنماط المتتالية بالتفصيل.
