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

أنماط القوائم

المعامل	الوصف
list-style-type	تُحدد شكل أو نوع مؤشر القائمة، ويمكن أن تأخذ القيم disc، أو circle، أو square، أو decimal، أو lower-roman، أو upper-roman، أو none. انظر توثيق W3C لمعرفة جميع القيم المتاحة.
list-style-position	تُحدِّد مكان مؤشر القائمة.
list-style-image	تُحدِّد صورة تستخدم كمؤشر للقائمة.
initial	تُرجع القيمة الإبتدائية للخاصية.
inherit	ترث أنماط القائمة من العنصر الأب.

مثال

li {
    list-style-type: square;
}

li {
    list-style-image: url('images/bullet.png')
}

li {
    list-style-position: inside;
}

تموضع عناصر القائمة

لكل من عناصر القائمة (عناصر <li>) والعنصر الحاوي لها (<ul> أو <ol>) هوامش وحواشي خاصة به، وتؤثر هذه الهوامش والحواشي على موضع محتوى عنصر القائمة <li>، وبما أن المتصفحات المختلفة تضيف هوامش وحواشي بمساحات مختلفة مما يؤدي إلى إختلاف شكل الصفحة حسب المتصفح الذي تُعرض فيه، لذلك لابد من إعادة ضبط هذه المساحات يدويًا. لكل عنصر من عناصر القائمة صندوق يُسمى صندوق المؤشر (marker box) يوضع بداخلة مؤشر عناصر القائمة، ويمكن أن يكون هذا الصندوق داخل أو خارج صندوق عنصر القائمة <li>.

وضع صندوق المؤشر داخل صندوق عنصر القائمة

list-style-position: insde;

وضع صندوق المؤشر خارج صندوق عنصر القائمة

list-style-position: outside;

اطَّلع على تجربة حيَّة لهذا المثال على JSFiddle.

حذف المؤشر أو الترقيم من عناصر القائمة

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

ملف HTML

  <ul>
      <li>first item</li>
      <li>second item</li>
  </ul>

ملف CSS

  ul {
      list-style-type: none;
  }
  li {
      margin: 0;
      padding: 0;
  }

تحديد شكل المؤشر أو نوع الترقيم لعناصر القائمة

تحديد شكل المؤشر لعناصر القائمة الغير مرتبة (<ul>)

list-style: disc; /* A filled circle (default) */
list-style: circle; /* A hollow circle */
list-style: square; /* A filled square */
list-style: '-'; /* any string */

تحديد نوع الترقيم لعناصر القائمة المرتبة (<li>)

list-style: decimal; /* Decimal numbers beginning with 1 (default) */
list-style: decimal-leading-zero;/* Decimal numbers padded by initial zeros (01, 02, 03, … 10) */
list-style: lower-roman; /* Lowercase roman numerals (i., ii., iii., iv., ...) */
list-style: upper-roman; /* Uppercase roman numerals (I., II., III., IV., ...) */
list-style-type: lower-greek; /* Lowercase roman letters (α., β., γ., δ., ...) */
list-style-type: lower-alpha; /* Lowercase letters (a., b., c., d., ...) */
list-style-type: lower-latin; /* Lowercase letters (a., b., c., d., ...) */
list-style-type: upper-alpha; /* Uppercase letters (A., B., C., D., ...) */
list-style-type: upper-latin; /* Uppercase letters (A., B., C., D., ...) */

العدَّادات (CSS Counters)

المعامل	الوصف
counter-name	إسم العداد.
integer	(إختياري) يُظهر القيمة الإبتدائية للعداد، أو القيمة التي سيزيد العداد بمقدارها.
none	القيمة الإبتدائية لجميع خصائص العداد.
counter-style	تُحدد النمط الذي ستظهر به قيمة العداد.
connector-string	تُحدد العلامة أو النص الذي سيُعرض بين قيم العداد (مثلًا: علامة النقطة (.) في 2.1.1).

استخدام الأرقام الرومانية في عدَّادات CSS

ملف CSS

  body {
      counter-reset: item-counter;
  }
  .item {
      counter-increment: item-counter;
  }
  .item:before {
      content: counter(item-counter, upper-roman) ". ";
  }

ملف HTML

  <div class='item'>Item No: 1</div>
  <div class='item'>Item No: 2</div>
  <div class='item'>Item No: 3</div>

في هذا المثال ستُعرض قيم العداد بالأرقام الرومانية (I، II، III).

ترقيم العناصر في صفحة HTML باستخدام العدادات

ملف HTML

  <div class='item'>
      <div class='item-header'>Item 1 Header</div>
      <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
  </div>
  <div class='item'>
      <div class='item-header'>Item 2 Header</div>
      <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
  </div>
  <div class='item'>
      <div class='item-header'>Item 3 Header</div>
      <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
  </div>

ملف CSS

  body {
      counter-reset: item-counter; /* إنشاء العداد */
  }
  .item {
      counter-increment: item-counter; /* تزيد قيمة العداد لكل تكرار للصنف item */
  }
  .item-header:before {
      content: counter(item-counter) ". "; /* طباعة قيمة العداد */
  }

  item {
      border: 1px solid;
      height: 100px;
      margin-bottom: 10px;
  }
  .item-header {
      border-bottom: 1px solid;
      height: 40px;
      line-height: 40px;
      padding: 5px;
  }
  .item-content {
      padding: 8px;
  }

اطَّلع على تجربة حيَّة لهذا المثال على JSFiddle.

إنشاء ترقيم متعدد المستويات باستخدام عدَّادات CSS

ملف HTML

  <ul>
      <li>Level 1
          <ul>
              <li>Level 1.1
                  <ul>
                      <li>Level 1.1.1</li>
                  </ul>
              </li>
          </ul>
      </li>

      <li>Level 2
          <ul>
              <li>Level 2.1
                  <ul>
                      <li>Level 2.1.1</li>
                      <li>Level 2.1.2</li>
                  </ul>
              </li>
          </ul>
      </li>
  </ul>

في هذا المثال استخدمنا مفهوم العدَّادات المتداخلة لإنشاء ترقيم متعدد المستويات، الفكرة الأساسية للعدادات المتداخلة أنّه إذا كان للعنصر عدَّاد بإسم معين وأُجبر على إنشاء عدَّاد آخر بنفس الإسم فإنه سيُنشِأه كابن للعداد الحالي.

في هذا المثال، عنصر <ul> الثاني يرث العداد list-item-number من العنصر الأب، ومن ثم عليه إنشاء عداد جديد بنفس الإسم لابنائه، وبالتالي يُنشئ العداد [list-item-number[1 كفرع من العداد [list-item-number[0. ولعرض النتيجة نستخدم الدالة ()counters بدلًا عن ()counter لأننا نمتلك أكثر من عدَّاد واحد.

تطبيق ظلال على العنصر

تسمح الخاصية box-shadow بإنشاء ظلال للعنصر، وإذا كانت الخاصية border-radius مُحدَّدة على العنصر مع هذه الخاصية، فستأخذ الظلال شكل الحواف المدورة.

المعامل	الوصف
inset	تؤدي إلى إنشاء ظلال داخل إطار العنصر.
offset-x	الإزاحة الأفقية للظل عن العنصر.
offset-y	الإزاحة الرأسية للظل عن العنصر.
blur-radius	كلما كبرت القيمة زاد تأثير الضبابية، وبالتالي سيصبح الظل أكبر وأكشف لونًا،
spread-radius	القيم الموجبة لها ستؤدي إلى جعل الظل يتوسع ويكبر، والقيم السالبة ستجعل الظل يتقلص ويصغر، وإذا لم تُحدَّد هذه القيمة فستكون `0` (أي أنَّ قياس الظل سيبقى كما هو).
color	لون الظل.

إنشاء ظل أسفل العنصر باستخدام العناصر الزائفة

ملف HTML

  <div class="box_shadow"></div>

ملف CSS

  box_shadow {
      background-color: #1C90F3;
      width: 200px;
      height: 100px;
      margin: 50px;
  }
  .box_shadow:after {
      content: "";
      width: 190px;
      height: 1px;
      margin-top: 98px;
      margin-left: 5px;
      display: block;
      position: absolute;
      z-index: -1;
      -webkit-box-shadow: 0px 0px 8px 2px #444444;
      -moz-box-shadow: 0px 0px 8px 2px #444444;
      box-shadow: 0px 0px 8px 2px #444444;
  }

النتيجة

اطَّلع على تجربة حيَّة لهذا المثال على JSFiddle.

إنشاء ظلال خارجية لأوجه العنصر الأربعة

ملف HTML

  <div class="box_shadow"></div>

ملف CSS

  .box_shadow {
      -webkit-box-shadow: 0px 0px 10px -1px #444444;
      -moz-box-shadow: 0px 0px 10px -1px #444444;
      box-shadow: 0px 0px 10px -1px #444444;
  }

اطَّلع على تجربة حيَّة لهذا المثال على JSFiddle.

إنشاء ظلال داخلية للعنصر

ملف HTML

  <div class="box_shadow"></div>

ملف CSS

  box_shadow {
      background-color: #1C90F3;
      width: 200px;
      height: 100px;
      margin: 50px;
      -webkit-box-shadow: inset 0px 0px 10px 0px #444444;
      -moz-box-shadow: inset 0px 0px 10px 0px #444444;
      box-shadow: inset 0px 0px 10px 0px #444444;
  }

النتيجة

اطَّلع على تجربة حيَّة لهذا المثال على JSFiddle.

إضافة ظلال متعددة للعنصر

ملف HTML

  <div class="box_shadow"></div>

ملف CSS

  box_shadow {
      width: 100px;
      height: 100px;
      margin: 100px;
      box-shadow:
      -52px -52px 0px 0px #f65314,
      52px -52px 0px 0px #7cbb00,
      -52px 52px 0px 0px #00a1f1,
      52px 52px 0px 0px #ffbb00;
  }

النتيجة

اطَّلع على تجربة حيَّة لهذا المثال على JSFiddle.

رسم الأشكال في CSS

رسم شبه المنحرف (Trapezoid)

لرسم شكل شبه المنحرف، أنشئ عنصر كتلي بارتفاع صفر، وعرض أكبر من الصفر، وإطار شفاف لجميع الأوجه عدا وجه واحد.

ملف HTML

  <div class="trapezoid"></div>

ملف CSS

  .trapezoid {
      width: 50px;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid black;
  }

رسم المثلثات (Triangles)

لرسم المثلث أنشئ عنصر كتلي بارتفاع وعرض صفر، ويُرسم الشكل باستخدام الإطارات.

رأس المثلث إلى أعلى

<div class="triangle-up"></div>

<style>
.triangle-up {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 50px solid rgb(246, 156, 85);
}
</style>

النتيجة

رأس المثلث إلى أسفل

<div class="triangle-down"></div>

<style>
.triangle-down {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 50px solid rgb(246, 156, 85);
}
</style>

النتيجة

رأس المثلث إلى اليمين

<div class="triangle-right"></div>

<style>
.triangle-right {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 50px solid rgb(246, 156, 85);
}
</style>

النتيجة

رأس المثلث إلى اليسار

<div class="triangle-left"></div>

<style>
.triangle-left {
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-right: 50px solid rgb(246, 156, 85);
}
</style>

النتيجة

المثلث يشير إلى أعلى اليمين

<div class="triangle-up-right"></div>

<style>
.triangle-up-right {
    width: 0;
    height: 0;
    border-top: 50px solid rgb(246, 156, 85);
    border-left: 50px solid transparent;
}
</style>

النتيجة

المثلث يشير إلى أعلى اليسار

<div class="triangle-up-left"></div>

<style>
.triangle-up-left {
    width: 0;
    height: 0;
    border-top: 50px solid rgb(246, 156, 85);
    border-right: 50px solid transparent;
}
</style>

النتيجة

المثلث يشير إلى أسفل اليمين

<div class="triangle-down-right"></div>

<style>
.triangle-down-right {
    width: 0;
    height: 0;
    border-bottom: 50px solid rgb(246, 156, 85);
    border-left: 50px solid transparent;
}
</style>

النتيجة

المثلث يشير إلى أسفل اليسار

<div class="triangle-down-left"></div>

<style>
.triangle-down-left {
    width: 0;
    height: 0;
    border-bottom: 50px solid rgb(246, 156, 85);
    border-right: 50px solid transparent;
}
</style>

النتيجة

رسم الدائرة

لرسم الدائرة أنشئ عنصر كتلة بارتفاع وعرض متساويين، ومن ثم حدد قيمة الخاصية border-radius لتكون 50%.

<div class="circle"></div>

<style>
.circle {
    width: 50px;
    height: 50px;
    background: rgb(246, 156, 85);
    border-radius: 50%;
}    
</style>

النتيجة

رسم الشكل البيضاوي

لرسم الشكل البيضاوي أنشئ عنصر كتلة بارتفاع وعرض مختلفين، ومن ثم حدد قيمة الخاصية border-radius لتكون 50%.

<div class="oval"></div>

<style>
.circle {
    width: 50px;
    height: 80px;
    background: rgb(246, 156, 85);
    border-radius: 50%;
}    
</style>

النتيجة

شكل الانفجار

رسم شكل انفجار بثماني نقاط

<div class="burst-8"></div>

<style>
.burst-8 {
    background: rgb(246, 156, 85);
    width: 40px;
    height: 40px;
    position: relative;
    text-align: center;
    -ms-transform: rotate(20deg);
    transform: rotate(20eg);
}

.burst-8::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 40px;
    background: rgb(246, 156, 85);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}
</style>

النتيجة

رسم شكل انفجار باثنتي عشر نقطة

<div class="burst-12"></div>

<style>
burst-12 {
    width: 40px;
    height: 40px;
    position: relative;
    text-align: center;
    background: rgb(246, 156, 85);
}

.burst-12::before, .burst-12::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 40px;
    background: rgb(246, 156, 85);
}

.burst-12::before {
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

.burst-12::after {
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}
</style>

النتيجة

رسم المربع

لرسم مربع انشئ عنصر كتلة بارتفاع وعرض متساويين.

مثال

<div class="square"></div>

<style>
.square {
    width: 100px;
    height: 100px;
    background: rgb(246, 156, 85);
}
</style>

النتيجة

رسم المكعب

تستخدم خصائص التحويلات ثنائية الأبعاد skewX()‎ و skewY()‎ على العناصر الزائفة لرسم المكعب.

مثال

<div class="cube"></div>

<style>
cube {
    background: #dc2e2e;
    width: 100px;
    height: 100px;
    position: relative;
    margin: 50px;
}

.cube::before {
    content: '';
    display: inline-block;
    background: #f15757;
    width: 100px;
    height: 20px;
    transform: skewX(-40deg);
    position: absolute;
    top: -20px;
    left: 8px;
}

.cube::after {
    content: '';
    display: inline-block;
    background: #9e1515;
    width: 16px;
    height: 100px;
    transform: skewY(-50deg);
    position: absolute;
    top: -10px;
    left: 100%;
}
</style>

النتيجة

اطلع على تجربة حيَّة لهذا المثال على JSFiddle.

رسم الهرم

تستخدم الإطارات مع التحويلات ثنائية الأبعاد skewY()‎ و rotate()‎ على العناصر الزائفة لرسم شكل الهرم.

<div class="pyramid"></div>

<style>
.pyramid {
    width: 100px;
    height: 200px;
    position: relative;
    margin: 50px;
}

.pyramid::before,.pyramid::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border: 50px solid;
    position: absolute;
}

.pyramid::before {
    border-color: transparent transparent #ff5656 transparent;
    transform: scaleY(2) skewY(-40deg) rotate(45deg);
}

.pyramid::after {
    border-color: transparent transparent #d64444 transparent;
    transform: scaleY(2) skewY(40deg) rotate(-45deg);
}
</style>