كيفية إنشاء قوائم مرقّمة بدوائر باستخدام HTML وCSS (دون صور)

يمكنك وضع دائرة حول أرقام القائمة المرتبة (<ol>) كما يظهر أدناه دون استخدام صيغ الصور مثل JPG أو PNG، مما يقلّل وقت التطوير ووقت تحميل موقعك.

عرض توضيحي: هكذا تبدو

Lorem ipsum dolor sit amet, felis dui nam, vivamus turpis bibendum et massa.
At augue, erat dui odio. Duis lectus, laoreet et, dolor nascetur tellus tellus sit etiam, massa leo dolor. Magna mi vitae et, lectus pellentesque, nec magna et ante, vehicula torquent venenatis tempor eget, elementum condimentum.
Integer porttitor donec, justo in, in pede, et leo ornare viverra erat ac. Dui diam, a sed purus, porta penatibus. Magna in, congue quam pulvinar cras malesuada condimentum nunc, vestibulum ut dolor tortor fusce nibh sollicitudin.
Vitae in, a pulvinar velit laoreet, tristique nascetur sapien. Placerat nunc a integer tincidunt sem, vivamus turpis, erat pulvinar interdum rhoncus nonummy vitae, etiam eleifend arcu non cras a commodo.
Quis mus donec, volutpat placerat nam et eros quam enim, id tincidunt aliquam libero odio, suspendisse a quam tristique ligula.

CSS

انسخ الشيفرة أدناه والصقها في ملف CSS الخاص بك.

ol {
    counter-reset: item;
    margin: 0;
    padding-left: 0;
}
ol > li {
    counter-increment: item;
    list-style: none inside;
    margin: 40px 0;
    overflow: hidden;
    font-size: 16px !important;
    line-height: 1.3;
}
ol > li:before {
    content: counter(item);
    margin-right: 20px;
    padding: 8px;
    display: block;
    box-sizing: content-box;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    background: #fe862c;
    color: #fff;
    text-align: center;
    font: 56px 'Lato', Helvetica, Arial, sans-serif;
    font-weight: 100;
    line-height: 65px;
    float: left;
}

HTML

انسخ الشيفرة أدناه والصقها في مستند HTML الخاص بك.

<ol>
    <li>Lorem ipsum dolor sit amet, felis dui nam, vivamus turpis bibendum et massa.</li>
    <li>At augue, erat dui odio. Duis lectus, laoreet et, dolor nascetur tellus tellus sit etiam, massa leo dolor. Magna mi vitae et, lectus pellentesque, nec magna et ante, vehicula torquent venenatis tempor eget, elementum condimentum.</li>
    <li>Integer porttitor donec, justo in, in pede, et leo ornare viverra erat ac. Dui diam, a sed purus, porta penatibus. Magna in, congue quam pulvinar cras malesuada condimentum nunc, vestibulum ut dolor tortor fusce nibh sollicitudin.</li>
    <li>Vitae in, a pulvinar velit laoreet, tristique nascetur sapien. Placerat nunc a integer tincidunt sem, vivamus turpis, erat pulvinar interdum rhoncus nonummy vitae, etiam eleifend arcu non cras a commodo.</li>
    <li>Quis mus donec, volutpat placerat nam et eros quam enim, id tincidunt aliquam libero odio, suspendisse a quam tristique ligula.</li>
</ol>

يمكنك نسخ شيفرتي CSS وHTML إلى ملفك وتعديلهما كما تشاء. برمجة ممتعة!

ملاحظة: تنطبق هذه المحددات على كل قائمة مرتبة في الصفحة. ولحصرها في قائمة واحدة، امنحها صنفًا (مثل ol.circled) وأضفه إلى كل محدد. تستخدم الأرقام خط Lato، وتعود إلى Helvetica أو Arial إذا لم يُحمَّل Lato.

عرض توضيحي: هكذا تبدو

CSS

HTML

اترك تعليقاً إلغاء الرد