Красивое оформление HTML списков / листов (ul / ol)

28.03.2022

Обычные HTML списки, отмеченные точками - выглядят скучными и устаревшими. В этой заметке покажу альтернативное и, на мой взгляд довольно красивое, оформления списков, когда в них много текста.

Каждый пункт списка (<li>) будет выделен так:

pic1

 
main .soPost ul li
{
    list-style-type: none;
    padding: 7px 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border-left: 10px solid #ffe300; 
    box-shadow: 2px -2px 5px 0 rgba(0,0,0,.1),
         -2px -2px 5px 0 rgba(0,0,0,.1),
        2px 2px 5px 0 rgba(0,0,0,.1),
        -2px 2px 5px 0 rgba(0,0,0,.1);
    font-size: 18px;
    transition: 0.3s all linear;
}

main .soPost ol li
{
    list-style-type: none;
    padding: 7px 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border-left: 10px solid #ffe300; 
    box-shadow: 2px -2px 5px 0 rgba(0,0,0,.1),
         -2px -2px 5px 0 rgba(0,0,0,.1),
        2px 2px 5px 0 rgba(0,0,0,.1),
        -2px 2px 5px 0 rgba(0,0,0,.1);
    font-size: 18px;
    transition: 0.3s all linear;
}

Категории: HTML, CSS
Яндекс.Метрика