CSS / الحدود الخارجية (Outline)

الناشر :كودا فوكس -

CSS / الحدود الخارجية

مفهوم الحدود الخارجية

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

CSS / الحدود الخارجية

الحدود الخارجية تظهر حول الحدود التي يمكن إضافتها للعنصر.

Outline apear arround border

في حال كانت زواية حدود العنصر مائلة فإن الحدود الخارجية ستميل مثلها.

Rounded border with rounded outline

يمكن إضافة هامش بين حدود العنصر و حدوده الخارجية ستميل مثلها.

Outline offset 5px

خصائص الحدود الداخلية و الخارجية

التعامل مع الحدود الخارجية يشبه كثيراً التعامل مع الحدود العادية و القيم التي يمكن وضعها لخصائصهما هي نفسها و لكن الفرق بينهما أن الحدود الخارجية فيها خيارات أقل.

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

الحدود الخارجية يتم رسمها حول حدود العنصر و لكنها لا تأخذ مساحة من حجمه.
إذاً حدود العنصر الخارجية قد تظهر فوق العناصر القريبة إن كانت ملاصقة لها.

تحديد شكل الحدود الخارجية العنصر

لتحديد شكل الحدود الخارجية نضيف الخاصية outline-style و من ثم نمرر لها إحدى القيم التالية:

  • dotted لإظهار الحدود الخارجية كنقط.
  • dashed لإظهار الحدود الخارجية كخط متقطع.
  • solid لإظهار الحدود الخارجية كخط.
  • double لإظهار الحدود الخارجية كخط مزدوج.
  • groove لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأنها أخدود.
  • ridge لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأنها قمة.
  • inset لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأن عليها ضوء من الجهة السفلية ناحية اليمين.
  • outset لإظهار الحدود الخارجية بشكل ثلاثي الأبعاد و كأن عليها ضوء من الجهة العلوية ناحية اليسار.
  • none لإزالة الحدود الخارجية و هي نفسها outline-width: 0;.

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
.dotted { 
    outline-style: dotted;
}

.dashed {
    outline-style: dashed;
}

.solid {
    outline-style: solid;
}

.double {
    outline-style: double;
}

.groove {
    outline-style: groove
}

.ridge {
    outline-style: ridge;
}

.inset {
    outline-style: inset;
}

.outset {
    outline-style: outset;
}

.none {
    outline-style: none;
}
        </style>
	</head>
	<body>
        <h2>CSS outline-style</h2>
        <p class="dotted">dotted outline</p>
        <p class="dashed">dashed outline</p>
        <p class="solid">solid outline</p>
        <p class="double">double outline</p>
        <p class="groove">groove outline</p>
        <p class="ridge">ridge outline</p>
        <p class="inset">inset outline</p>
        <p class="outset">outset outline</p>
        <p class="none">none outline</p>
    </body>
</html>

تحديد سمك الحدود الخارجية

لتحديد سمك الحدود الخارجية نضيف الخاصية outline-width و من ثم نمرر لها إحدى القيم التالية:

  • thin لجعل الحدود الخارجية رفيعة السمك.
  • medium لجعل الحدود الخارجية متوسطة السمك.
  • thick لجعل الحدود الخارجية عريضة السمك.
  • رقم بالبكسل px أو بوحدة قياس أخرى ليمثل سمك الحدود الخارجية.

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
.one {
	outline-style: solid;
	outline-width: 2px;
}

.two {
	outline-style: solid;
	outline-width: medium;
}

.three {
	outline-style: solid;
	outline-width: thick;
}
        </style>
	</head>
	<body>
        <h2>CSS outline-width</h2>
        <p class="one">solid 2px</p>
        <p class="two">solid medium</p>
        <p class="three">dotted thick</p>
    </body>
</html>

تحديد لون الحدود الخارجية

لتلوين حدود العنصر الخارجية نستخدم الخاصية outline-color و اللون نضعه لها كقيمة من خلال إسمه (Color Name) أو بتحديد درجته بأسلوب HEX أو RGB أو RGBA أو HSL أو HSLA كما تعلمنا في درس الألوان.

إن لم يكن شكل الحدود الخارجية outline-style محدداً فإن لون الحدود outline-color لن يظهر لأنه منطقياً لا يمكنك تلوين الحدود و هي بالأساس غير موجودة.


فيما يلي قمنا بتلوين الحدود الخارجية للعناصر بـألوان مختلفة.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
.one {
    outline-style: solid;
    outline-color: red;
}
.two {
    outline-style: solid;
    outline-color: green;
}
.three {
    outline-style: solid;
    outline-color: blue;
}
        </style>
	</head>
	<body>
        <h2>CSS outline-color</h2>
        <p class="one">Red outline</p>
        <p class="two">Green outline</p>
        <p class="three">Blue outline</p>
    </body>
</html>

تعريف كل خصائص الحدود الخارجية بسطر واحد

لتحديد سمك، شكل و لون حدود العنصر الخارجية بشكل مختصر أكتب outline و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:

outline: [outline-width] [outline-style] [outline-color];

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

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
.demo {
    outline: 5px solid red;
}
        </style>
	</head>
	<body>
        <h2>CSS outline shorthand</h2>
        <p class="demo">Red outline</p>
    </body>
</html>

إبعاد الحدود الخارجية عن الحدود الأصلية للعنصر

لإبعاد الحدود الخارجية للعنصر عن حدوده الأساسية نضيف الخاصية outline-offset و من ثم نمرر لها رقم بالبكسل أو بوحدة قياس أخرى ليمثّل حجم الفراغ بينهما.

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

المثال الأول

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
.demo {
	border: 2px solid black;
    outline: 2px solid cadetblue;
	outline-offset: 5px;
}
        </style>
	</head>
	<body>
        <h2>CSS outline offset</h2>
        <p class="demo">5px between outline and border</p>
    </body>
</html>

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

المثال الثاني

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
.demo {
	border: 2px solid black;
    outline: 2px solid cadetblue;
	outline-offset: 5px;
    padding: 10px;
}
        </style>
	</head>
	<body>
        <h2>CSS outline offset</h2>
        <p class="demo">5px between outline and border</p>
    </body>
</html>

طريقة معرفة العنصر الذي يسبب مشكلة في حجم الصفحة

حين يصبح محتوى الصفحة كبيراً أحياناً تبدأ بملاحظة أنه يظهر شريط تمرير (Scrollbar) لسبب غير معروف و هذا الأمر يجعل الصفحة تظهر بشكل سيئ أمام المستخدم.

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

* {
    outline: 3px solid red;
}

كمثال عملي لاحظ أن الصفحة التالية يظهر فيها شريط تمرير في الأسفل مع أنه لا يوجد أي داعي لأن يظهر.

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
h3 {
    width: 100%;
    margin-left: 50px;
}
        </style>
	</head>
<body>
        <h2>اكتشف العنصر الذي يظهر شريط التمرير</h2>
        <p>لا يوجد شيء خاطئ معي.</p>
        <br>
        <h3>أنا السبب</h3>
        <p>لا يوجد شيء خاطئ معي.</p>
    </body>
</html>

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

الآن نقوم بإزاحة شريط التمرير فيظهر لنا العنصر الذي يسبب هذه المشكلة بكل سهولة.

خد الكواد نسخ واضغط هنا جرب الكود 📋 

        
<!DOCTYPE html>
<html>
	<head>
        <style>
* {
    outline: 3px solid red;
}
            
h3 {
    width: 100%;
    margin-left: 50px;
}
        </style>
	</head>
	<body>
        <h2>اكتشف العنصر الذي يظهر شريط التمرير</h2>
        <p>لا يوجد شيء خاطئ معي.</p>
        <br>
        <h3>أنا السبب</h3>
        <p>لا يوجد شيء خاطئ معي.</p>
    </body>
</html>

التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال