الحدود والزوايا المنحنية (Borders & Border-Radius) في CSS

بواسطة /

المقدمة

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

في هذا الدرس، سنتعلم كيفية إنشاء الحدود باستخدام border-style وborder-width، وكيفية تخصيص الزوايا باستخدام border-radius. سنقدم أمثلة عملية على تنسيقات مختلفة للحدود والزوايا المنحنية لتحسين تصميم الواجهات.

أولًا: إنشاء حدود باستخدام border-style و border-width

1. border-style: تحديد نمط الحدود

تحدد خاصية border-style نمط الحدود. هناك العديد من الأنماط المتاحة:

  • solid: خط صلب.
  • dashed: خط متقطع.
  • dotted: خط منقط.
  • double: خط مزدوج.
  • none: بدون حدود.

مثال:

div {
  border-style: solid;
}

2. border-width: تحديد عرض الحدود

تحدد border-width سماكة الحدود. يمكن تحديد العرض باستخدام:

  • وحدات مثل px (بكسل).
  • كلمات مثل thin، medium، وthick.

مثال:

div {
  border-style: solid;
  border-width: 5px;
}

3. التحكم في الحدود لكل جانب على حدة

يمكنك تطبيق حدود مختلفة لكل جانب باستخدام:

  • border-top
  • border-right
  • border-bottom
  • border-left

مثال:

div {
  border-top: 3px solid red;
  border-right: 5px dashed blue;
  border-bottom: 2px dotted green;
  border-left: 4px double black;
}

ثانيًا: تخصيص لون الحدود باستخدام border-color

تُستخدم border-color لتحديد لون الحدود. يمكن تعيين لون واحد لجميع الجوانب أو تخصيص لون مختلف لكل جانب.

مثال:

div {
  border-style: solid;
  border-width: 3px;
  border-color: red green blue black;
}

شرح:

  • يتم تعيين اللون الأحمر للحد العلوي، الأخضر لليمين، الأزرق للأسفل، والأسود لليسار.

ثالثًا: الزوايا المنحنية باستخدام border-radius

تحدد border-radius انحناء الزوايا، مما يعطي مظهرًا أكثر نعومة للعناصر. يمكن التحكم في الزوايا بشكل منفصل أو موحد.

1. تعيين جميع الزوايا بنفس القيمة

مثال:

div {
  border: 2px solid black;
  border-radius: 10px;
}

شرح:

  • يجعل جميع الزوايا منحنية بـ 10 بكسل.

2. تخصيص كل زاوية على حدة

مثال:

div {
  border: 2px solid black;
  border-radius: 10px 20px 30px 40px;
}

شرح:

  • يتم تعيين القيم بترتيب:
  1. الزاوية العلوية اليسرى: 10px
  2. الزاوية العلوية اليمنى: 20px
  3. الزاوية السفلية اليمنى: 30px
  4. الزاوية السفلية اليسرى: 40px

3. إنشاء دوائر باستخدام border-radius: 50%

مثال:

div {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  border-radius: 50%;
}

شرح:

  • يتم إنشاء دائرة مثالية عند تعيين border-radius: 50% مع عرض وارتفاع متساويين.

رابعًا: الجمع بين الحدود والزوايا المنحنية

مثال عملي: زر بحواف منحنية وحدود متقدمة

HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>الحدود والزوايا المنحنية</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <button class="rounded-btn">زر بحواف منحنية</button>
</body>
</html>

CSS (styles.css):

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

/* تنسيق الزر بحواف منحنية */
.rounded-btn {
  padding: 15px 30px;
  border: 2px solid #008cba;
  border-radius: 25px;
  background-color: white;
  color: #008cba;
  font-size: 18px;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

.rounded-btn:hover {
  background-color: #008cba;
  color: white;
  border-color: #005f7a;
}

شرح:

  • يتم تصميم زر بحواف منحنية باستخدام border-radius: 25px.
  • عند تمرير المؤشر فوق الزر، يتغير لون الخلفية ولون النص باستخدام تأثير hover.

خامسًا: إنشاء أشكال مخصصة باستخدام border-radius

1. إنشاء شكل بيضاوي

CSS:

div {
  width: 200px;
  height: 100px;
  background-color: #ff5733;
  border-radius: 50%;
}

شرح:

  • يتم إنشاء شكل بيضاوي باستخدام border-radius: 50% مع أبعاد غير متساوية.

2. إنشاء فقاعة نص (Speech Bubble)

CSS:

.speech-bubble {
  position: relative;
  background-color: #008cba;
  color: white;
  padding: 15px;
  border-radius: 10px;
  width: 200px;
  text-align: center;
}

.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: #008cba transparent transparent transparent;
}

شرح:

  • يتم إنشاء فقاعة نص باستخدام border-radius لتنعيم الحواف، مع مثلث صغير باستخدام ::after لمحاكاة ذيل الفقاعة.

تطبيق عملي: تنسيق بطاقة باستخدام الحدود والزوايا المنحنية

HTML:

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <title>بطاقة منسقة باستخدام CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="card">
    <h2>بطاقة تعريفية</h2>
    <p>هذا نص داخل بطاقة منسقة باستخدام الحدود والزوايا المنحنية.</p>
  </div>
</body>
</html>

CSS (styles.css):

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background-color: white;
  text-align: center;
}

.card h2 {
  margin-top: 0;
  color: #008cba;
}

.card p {
  color: #555;
}

شرح:

  • تم تصميم بطاقة تعريفية باستخدام border-radius لجعل الزوايا ناعمة.
  • تم إضافة ظل للصندوق باستخدام box-shadow لإبراز البطاقة بشكل أفضل.

خاتمة

في هذا الدرس، تعلمنا كيفية:

  1. إنشاء الحدود باستخدام border-style وborder-width.
  2. تخصيص ألوان الحدود باستخدام border-color.
  3. تكوين الزوايا المنحنية باستخدام `border-radius

`.

  1. إنشاء أشكال مخصصة مثل الدوائر والفقاعات النصية.

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

أسئلة شائعة (FAQ)

1. هل يمكن تطبيق border-radius على الصور؟

  • نعم، يمكن استخدام border-radius لجعل زوايا الصور منحنية.

2. ما الفرق بين border وoutline؟

  • border جزء من Box Model ويؤثر على حجم العنصر.
  • outline لا يؤثر على حجم العنصر ويظهر خارج الحدود.

3. هل يمكن استخدام وحدات غير البكسل في border-radius؟

  • نعم، يمكن استخدام وحدات النسب المئوية أو em لجعل الزوايا ديناميكية.

هل أنت مستعد للانتقال إلى الدرس التالي؟ 😊

اكتشاف المزيد من كود التطور

اشترك للحصول على أحدث التدوينات المرسلة إلى بريدك الإلكتروني.

Related Posts

اترك رد

Scroll to Top