البرمجة

تصميم القوائم والأشكال بـCSS

اخر تحديث 02/06/2025
20 تمت قراءة 5 دقيقة

تنسيق القوائم وإضافة الظلال ورسم الأشكال في CSS: دليل شامل وموسع

تُعدّ لغة CSS (Cascading Style Sheets) حجر الأساس في تصميم صفحات الويب، إذ تمنح المطورين القدرة على التحكم في شكل ومظهر المحتوى بشكل دقيق واحترافي. من بين الجوانب الأساسية التي يلجأ إليها مصممو المواقع لتجميل وتحسين تجربة المستخدم، تنسيق القوائم وإضافة الظلال ورسم الأشكال المختلفة باستخدام CSS. هذه التقنيات تساهم بشكل كبير في تعزيز التفاعل البصري وجذب انتباه الزائرين، بالإضافة إلى تنظيم المحتوى بطريقة سهلة القراءة ومرتبة.

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

مواضيع ذات صلة

1. تنسيق القوائم باستخدام CSS

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

    )، القوائم غير المرتبة (

      )، والقوائم الوصفية (

      ).

      1.1 القوائم المرتبة وغير المرتبة

      القائمة المرتبة تستخدم أرقاماً أو حروفاً لتسلسل العناصر، بينما القائمة غير المرتبة تستخدم رموزاً مثل النقاط أو الشرطات.

      التنسيق الأساسي للقوائم

      عند استخدام CSS يمكن التحكم في مظهر القوائم من حيث:

      • نوع العلامة (النقاط، الأرقام، رموز أخرى)

      • تباعد العناصر من حيث الحشو (padding) والهامش (margin)

      • اتجاه النص والمحاذاة

      • اللون والخط وحجم النص

      مثال:

      css
      ul.custom-list {
  list-style-type: square; /* يجعل النقاط مربعات */
  padding-left: 20px;      /* مسافة بادئة للقائمة */
  color: #333333;          /* لون النص */
  font-family: 'Arial', sans-serif;
}

ol.custom-list {
  list-style-type: upper-roman; /* ترقيم روماني */
  padding-left: 30px;
  color: #555555;
}

      إزالة العلامات من القوائم

      في بعض التصاميم، قد يرغب المصمم في إزالة العلامات بشكل كامل لجعل القائمة تبدو كأنها مجموعة من الفقرات أو العناوين:

      css
      ul.no-style {
  list-style-type: none; /* إزالة العلامات */
  padding: 0;
  margin: 0;
}

      1.2 التحكم في اتجاه ومظهر العلامات

      يمكن تخصيص مظهر علامات القوائم باستخدام خاصية list-style-image لإدخال صورة بدل النقاط التقليدية، أو باستخدام خاصية ::marker في CSS الحديثة.

      مثال على استخدام صورة كعلامة:

      css
      ul.image-marker {
  list-style-image: url('checkmark.png'); /* علامة مخصصة */
  padding-left: 25px;
}

      مثال على تعديل شكل العلامة باستخدام ::marker:

      css
      ul.custom-marker li::marker {
  color: #ff6600;
  font-size: 18px;
  font-weight: bold;
}

      1.3 تنسيق القوائم الوصفية

      القائمة الوصفية (

      ) تتكون من أزواج dt (مصطلح) و dd (وصف). يمكن تنسيقها باستخدام CSS لزيادة الوضوح والتمييز.

      مثال:

      css
      dl.custom-dl dt {
  font-weight: bold;
  color: #2a2a2a;
  margin-top: 15px;
}

dl.custom-dl dd {
  margin-left: 20px;
  color: #555555;
  font-style: italic;
}

      2. إضافة الظلال في CSS

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

      2.1 ظل النص (Text Shadow)

      تُستخدم خاصية text-shadow لإضافة ظل للنصوص. تقبل هذه الخاصية عدة قيم تحدد موقع الظل، مدى تشويشه ولونه.

      الصيغة العامة:

      css
      text-shadow: offset-x offset-y blur-radius color;

      • offset-x: إزاحة الظل أفقياً (قيم موجبة لليمين، سالبة لليسار)

      • offset-y: إزاحة الظل عمودياً (قيم موجبة لأسفل، سالبة للأعلى)

      • blur-radius: مقدار التمويه (اختياري)

      • color: لون الظل

      مثال عملي:

      css
      h1 {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  color: #222222;
}

      يمكن استخدام ظلال متعددة في نفس الوقت لفعل تأثيرات أكثر تعقيداً:

      css
      h2 {
  text-shadow: 1px 1px 2px black, 0 0 5px blue;
}

      2.2 ظل الصندوق (Box Shadow)

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

      الصيغة العامة:

      css
      box-shadow: offset-x offset-y blur-radius spread-radius color inset;

      • offset-x: إزاحة الظل أفقياً

      • offset-y: إزاحة الظل عمودياً

      • blur-radius: مقدار التمويه

      • spread-radius: مدى انتشار الظل (اختياري)

      • color: لون الظل

      • inset: لإضافة الظل داخل العنصر بدلاً من خارجه (اختياري)

      مثال:

      css
      div.card {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}

      ظلال داخلية

      يمكن استخدام الظلال الداخلية لإضافة إحساس بعمق داخلي:

      css
      div.inset-shadow {
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
  background-color: #eaeaea;
  padding: 15px;
}

      ظلال متعددة

      مثل نصوص الظل، يمكن دمج أكثر من ظل في خاصية واحدة:

      css
      button.fancy {
  box-shadow: 0 4px 6px rgba(0,0,0,0.2), 0 0 10px rgba(255,165,0,0.6);
}

      3. رسم الأشكال باستخدام CSS

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

      3.1 رسم الأشكال الأساسية

      المربع والمستطيل

      ببساطة، يمكن رسم المربعات والمستطيلات باستخدام width و height و background-color:

      css
      .div-square {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
}

      الدائرة

      لرسم دائرة، يستخدم خاصية border-radius بنسبة 50% على مربع متساوي الأبعاد:

      css
      .div-circle {
  width: 100px;
  height: 100px;
  background-color: #2196F3;
  border-radius: 50%;
}

      البيضاوي

      يمكن عمل شكل بيضاوي بتعديل نسب العرض والارتفاع مع border-radius:

      css
      .div-ellipse {
  width: 150px;
  height: 80px;
  background-color: #FF5722;
  border-radius: 50% / 100%;
}

      3.2 الأشكال المعقدة باستخدام clip-path

      تتيح خاصية clip-path إمكانية قص العناصر بأشكال مختلفة متقدمة، مثل المثلثات، النجوم، الأشكال المتعددة الأضلاع، وغيرها.

      مثال على مثلث:

      css
      .div-triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #f44336;
}

      أو باستخدام clip-path:

      css
      .div-polygon {
  width: 150px;
  height: 150px;
  background-color: #673AB7;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

      3.3 استخدام transform لتدوير الأشكال

      يمكن تدوير الأشكال وتحويلها باستخدام خاصية transform:

      css
      .div-rotated {
  width: 100px;
  height: 100px;
  background-color: #009688;
  transform: rotate(45deg);
  margin: 50px;
}

      3.4 إنشاء أشكال أخرى مثل النجوم والزهور

      يمكن دمج خصائص clip-path مع تنسيقات معقدة لإنشاء أشكال زخرفية.

      مثال على نجمة:

      css
      .star {
  width: 100px;
  height: 100px;
  background-color: gold;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

      4. دمج التنسيقات: قائمة معظلة بظلال وأشكال

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

      مثال عملي:

      html
      <ul class="fancy-list">
  <li>العنصر الأولli>
  <li>العنصر الثانيli>
  <li>العنصر الثالثli>
ul>

      css
      .fancy-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 300px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.fancy-list li {
  padding: 15px 20px;
  border-bottom: 1px solid #ddd;
  position: relative;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 18px;
  color: #333;
}

.fancy-list li:last-child {
  border-bottom: none;
}

.fancy-list li::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  background-color: #2196F3;
  border-radius: 50%;
  box-shadow: 0 0 5px #2196F3;
}

      في المثال أعلاه تم تصميم قائمة بدون علامات نمطية، واستبدال النقاط بدوائر ملونة مع ظلال تعطي تأثيراً ثلاثي الأبعاد للعلامة.

      5. الجدول: مقارنة بين خصائص CSS المستخدمة في تنسيق القوائم والظلال ورسم الأشكال

      الخاصية الاستخدام القيم الشائعة الملاحظات
      list-style-type تحديد نوع علامة القائمة disc, circle, square, none تتحكم في شكل العلامة التقليدية
      list-style-image استخدام صورة كعلامة رابط للصورة يحل محل العلامة الافتراضية
      ::marker تنسيق العلامة color, font-size, content متاح في CSS3 وما بعده
      text-shadow إضافة ظل للنص offset-x offset-y blur color يمكن إضافة عدة ظلال مفصولة بفواصل
      box-shadow إضافة ظل للصندوق offset-x offset-y blur spread color inset يمكن استخدام ظلال داخلية وخارجية
      border-radius تحديد انحناء زوايا العنصر نسبة مئوية أو بكسل تستخدم لرسم دوائر وبيضاوي
      clip-path قص العنصر بأشكال هندسية polygon(), circle(), ellipse(), inset() تعطي مرونة كبيرة لرسم الأشكال
      transform تدوير أو تحجيم أو تحريك العنصر rotate(), scale(), translate() تستخدم لتحريك وتعديل الأشكال

      6. أفضل الممارسات لتنسيق القوائم والظلال والأشكال

      • استخدام وحدات القياس المرنة: مثل em, rem, و% بدلاً من وحدات ثابتة px لتناسب التصميم مع مختلف الأجهزة.

      • الاهتمام بتباعد العناصر: padding وmargin لتنظيم القوائم وجعلها سهلة القراءة.

      • تجنب الإفراط في الظلال: الظلال المبالغ فيها قد تجعل التصميم ثقيل وغير مريح بصرياً.

      • اختبار التوافق مع المتصفحات: بعض الخصائص مثل clip-path قد لا تدعمها جميع المتصفحات بنفس الشكل.

      • التركيز على الوصول: استخدام تباين ألوان كافٍ لتمييز القوائم والعناصر لضمان وضوحها لجميع المستخدمين.

      خاتمة

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

      المصادر

      1. MDN Web Docs – CSS Lists: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style

      2. MDN Web Docs – Box Shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

      3. CSS-Tricks – Clip-path for Beginners: https://css-tricks.com/clipping-masking-css/

اخر تحديث 02/06/2025
20 تمت قراءة 5 دقيقة