Оформление списков для информационных блоков

Информация о материале: Категория: Админ; Просмотров: 417

Оформление списков с использованием всего одного класса.

Пример:

Стиль list1a

Элемент списка
Элемент списка
Элемент списка

Стиль list1b

Элемент списка
Элемент списка
Элемент списка

Стиль list2a

Элемент списка
Элемент списка
Элемент списка

Стиль list2b

Элемент списка
Элемент списка
Элемент списка

Стиль list3b

Элемент списка
Элемент списка
Элемент списка

Стиль list3a

Элемент списка
Элемент списка
Элемент списка

Стиль list4a

Элемент списка
Элемент списка
Элемент списка

Стиль list4b

Элемент списка
Элемент списка
Элемент списка

Стиль list5a

Элемент списка
Элемент списка
Элемент списка

Стиль list5b

Элемент списка
Элемент списка
Элемент списка

HTML:

<div class="container">
    <div class="row">
        <div class="col">
            <p>Стиль list1a</p>
            <ol class="list1a">
                <li>Элемент списка</li>
                <li>Элемент списка</li>
                <li>Элемент списка</li>
            </ol>
        </div>
        <div class="col">
            <p>Стиль list1b</p>
            <ol class="list1b">
                <li>Элемент списка</li>
                <li>Элемент списка</li>
                <li>Элемент списка</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p>Стиль list2a</p>
            <ol class="list2a">
                <li>Элемент списка</li>
                <li>Элемент списка</li>
                <li>Элемент списка</li> 
            </ol>
        </div>
        <div class="col">
            <p>Стиль list2b</p>
            <ol class="list2b">
                <li>Элемент списка</li>
                <li>Элемент списка</li>
                <li>Элемент списка</li> 
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p>Стиль list3b</p>
            <ol class="list3b">
                <li>Элемент списка</li>
                <li>Элемент списка</li>
                <li>Элемент списка</li> 
            </ol>
        </div>
        <div class="col">
            <p>Стиль list3a</p>
            <ol class="list3a">
                <li>Элемент списка</li>
                <li>Элемент списка</li>
                <li>Элемент списка</li>  
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p>Стиль list4a</p>
            <ol class="list4a">
                <li>Элемент списка</li>
                <li>Элемент списка</li>
                <li>Элемент списка</li> 
            </ol>
        </div>
        <div class="col">
            <p>Стиль list4b</p>
            <ol class="list4b">
                <li>Элемент списка</li>
                <li>Элемент списка</li>
                <li>Элемент списка</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p>Стиль list5a</p>
            <ol class="list5a">
                <li>Элемент списка</li>
                <li>Элемент списка</li>
                <li>Элемент списка</li>  
            </ol>
        </div>
        <div class="col">
            <p>Стиль list5b</p>
            <ol class="list5b">
                <li>Элемент списка</li>
                <li>Элемент списка</li>
                <li>Элемент списка</li> 
            </ol>
        </div>
    </div>
</div>

CSS:

/*Стиль list1a*/
.list1a {
    margin: 20px 0 0;
    padding:0;
    list-style: none;
    counter-reset: li;
}
.list1a li {
    border: 2px solid #337AB7;
    background: #EBF3FA;
    position: relative;
    margin-bottom: 20px;
    padding: 16px 10px;
}
.list1a li:hover {
    z-index: 1;
}
.list1a li:before {
    border: 2px solid #337AB7;
    position: absolute;
    top: -14px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: bold;
    color: #337AB7;
    background: #F7FAFD;
    counter-increment: li;
    content: counter(li);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.list1a li:hover:before {
    background: #337AB7;
    color: #FFF;
    -webkit-transform: translate(-12px, 0);
    -ms-transform: translate(-12px, 0);
    -o-transform: translate(-12px, 0);
    transform: translate(-12px, 0);
}
.list1a li:after {
    content: "";
    position: absolute;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -webkit-transition-property: width;
    transition-property: width;
    z-index: -1;
    background: #FFF;
    height: 100%;
    left: 0;
    top: 0;
    width: 0;
}
.list1a li:hover:after {
    width: 100%;
}

/*Стиль list1b*/
.list1b {
    margin: 20px 0 0;
    padding:0;
    list-style: none;
    counter-reset: li;
}
.list1b li {
    border: 2px solid #DDDDDD;
    background: #FAFAFA;
    position: relative;
    margin-bottom: 20px;
    padding: 16px 10px;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
}
.list1b li:hover {
    z-index: 1;
    border: 2px solid #ADCEE9;
}
.list1b li:before {
    border: 2px solid #ADCEE9;
    position: absolute;
    top: -14px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: bold;
    color: #337AB7;
    background: #F7FAFD;
    counter-increment: li;
    content: counter(li);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.list1b li:hover:before {
    border: 2px solid #337AB7;
    background: #337AB7;
    color: #FFF;
    -webkit-transform: translate(-12px, 0);
    -ms-transform: translate(-12px, 0);
    -o-transform: translate(-12px, 0);
    transform: translate(-12px, 0);
}
.list1b li:after {
    content: "";
    position: absolute;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    -webkit-transition-property: width;
    transition-property: width;
    z-index: -1;
    background: #F0F5FB;
    height: 100%;
    left: 0;
    top: 0;
    width: 0;
}
.list1b li:hover:after {
    width: 100%;
}

/*Стиль list2a*/
.list2a {
    margin-bottom: 8px;
    padding:0;
    list-style: none;
    counter-reset: li;
}    
.list2a li {
    position: relative;
    border: 2px solid #337AB7;
    background: #EBF3FA;
    padding:16px 20px 16px 28px;
    margin:12px 0 12px 40px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.list2a li:hover {
    background: #FFF;
}
.list2a li:before {
    line-height: 32px;
    position: absolute;
    top: 4px;
    left:-40px;
    width:40px;
    text-align:center;
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    background: #337AB7;
    counter-increment: li;
    content: counter(li);
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
}
.list2a li:hover:before {
    width:46px;
}
.list2a li:after {
    position: absolute;
    left: 0;
    top: 4px;
    content: "";
    height: 0;
    width: 0;
    border: 16px solid transparent;
    border-left-color: #337AB7;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s
}
.list2a li:hover:after {
    margin-left: 6px;
}

/*Стиль list2b*/
.list2b {
    margin-bottom: 8px;
    padding:0;
    list-style: none;
    counter-reset: li;
}    
.list2b li {
    position: relative;
    border: 2px solid #DDDDDD;
    background: #FAFAFA;
    padding:16px 20px 16px 28px;
    margin:12px 0 12px 40px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.list2b li:hover {
    background: #F0F5FB;
    border: 2px solid #ADCEE9;
}
.list2b li:before {
    line-height: 32px;
    position: absolute;
    top: 4px;
    left:-40px;
    width:40px;
    text-align:center;
    font-size: 16px;
    font-weight: bold;
    color: #FFF;
    background: #77AEDB;
    counter-increment: li;
    content: counter(li);
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
}
.list2b li:hover:before {
    width:46px;
    background: #337AB7;
}
.list2b li:after {
    position: absolute;
    left: 0;
    top: 4px;
    content: "";
    height: 0;
    width: 0;
    border: 16px solid transparent;
    border-left-color: #77AEDB;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s
}
.list2b li:hover:after {
    margin-left: 6px;
    border-left-color: #337AB7;
}

/*Стиль list3a*/
.list3a {
    padding:0;
    list-style: none;
    counter-reset: li;
}    
.list3a li {
    position: relative;
    border-left: 4px solid #337AB7;
    padding:16px 20px 16px 28px;
    margin:12px 0 12px 80px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.list3a li:before {
    line-height: 32px;
    position: absolute;
    top: 10px;
    left:-80px;
    width:80px;
    text-align:center;
    font-size: 24px;
    font-weight: bold;
    color: #77AEDB;
    counter-increment: li;
    content: counter(li);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}
.list3a li:hover:before {
    color: #337AB7;
}
.list3a li:after {
    position: absolute;
    top: 26px;
    left: -40px;
    width: 60px;
    height: 60px;
    border: 8px solid #3399FF;
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.1);
    transform: translateX(-50%) translateY(-50%) scale(0.1);
    pointer-events: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;        
}
.list3a li:hover:after {
    opacity: 0.2;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1);
}

/*Стиль list3b*/
.list3b {
    padding:0;
    list-style: none;
    counter-reset: li;
}    
.list3b li {
    position: relative;
    border-left: 4px solid #DDDDDD;
    padding:16px 20px 16px 28px;
    margin:12px 0 12px 80px;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}
.list3b li:before {
    line-height: 32px;
    position: absolute;
    top: 10px;
    left:-80px;
    width:80px;
    text-align:center;
    font-size: 24px;
    font-weight: bold;
    color: #DDDDDD;
    counter-increment: li;
    content: counter(li);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;        
}
.list3b li:hover:before {
    color: #77AEDB;
}
.list3b li:after {
    position: absolute;
    top: 26px;
    left: -40px;
    width: 60px;
    height: 60px;
    border: 8px solid #3399FF;
    border-radius: 50%;
    content: '';
    opacity: 0;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(0.1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(0.1);
    transform: translateX(-50%) translateY(-50%) scale(0.1);
    pointer-events: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;        
}
.list3b li:hover:after {
    opacity: 0.2;
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1);
}

/*Стиль list4a*/
.list4a {
    padding:0;
    list-style: none;
    counter-reset: li;
}    
.list4a li {
    position: relative;
    padding:12px 20px 20px 28px;
    margin-left: 40px;
    transition-duration: 0.3s;
}
.list4a li:before {
    border: 6px solid transparent;
    line-height: 30px;
    position: absolute;
    top: 0;
    left:-30px;
    width:42px;
    text-align:center;
    font-size: 13px;
    font-weight: bold;
    color: #77AEDB;
    counter-increment: li;
    content: counter(li);
    transition-duration: 0.3s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
    }
.list4a li:hover:before {
    color: #337AB7;    
}
.list4a li:after {
    position: absolute;
    top: 0;
    left: -30px;
    width: 42px;
    height: 42px;
    border: 6px solid #3399FF;
    border-radius: 50%;
    content: '';
    opacity: 0.5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}
.list4a li:hover:after {
    animation: 500ms ease-in-out 0s bounceIn;
    opacity: 1;
}    
 
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    20% {
        transform: scale3d(1.3, 1.3, 1.3);
    }
    40% {
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(.97, .97, .97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/*Стиль list4b*/
.list4b {
    padding:0;
    list-style: none;
    counter-reset: li;
}    
.list4b li {
    position: relative;
    padding:12px 20px 20px 28px;
    margin-left: 40px;
    transition-duration: 0.3s;
}
.list4b li:before {
    border: 6px solid transparent;
    line-height: 30px;
    position: absolute;
    top: 0;
    left:-30px;
    width:42px;
    text-align:center;
    font-size: 13px;
    font-weight: bold;
    color: #ADCEE9;
    counter-increment: li;
    content: counter(li);
    transition-duration: 0.3s;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}
.list4b li:hover:before {
    color: #337AB7;
}
.list4b li:after {
    position: absolute;
    top: 0;
    left: -30px;
    width: 42px;
    height: 42px;
    border: 6px solid #DDDDDD;
    border-radius: 50%;
    content: '';
    opacity: 0.5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;    
}
.list4b li:hover:after {
    animation: 500ms ease-in-out 0s bounceIn;
    opacity: 1;
    border: 6px solid #ADCEE9;    
}    
 
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3);
    }
    20% {
        transform: scale3d(1.3, 1.3, 1.3);
    }
    40% {
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        transform: scale3d(.97, .97, .97);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/*Стиль list5a*/
.list5a {
    padding:0;
    list-style: none;
}
.list5a li{
    padding:6px;
}
.list5a li:before {
    padding-right:10px;
    font-weight: bold;
    color: #77AEDB;
    content: "\2606";
    transition-duration: 0.5s;
}
.list6a li:hover:before {
    color: #337AB7;
    content: "\2605";
}

/*Стиль list5b*/
.list5b {
    padding:0;
    list-style: none;
}
.list5b li{
    padding:6px;
}
.list5b li:before {
    padding-right:10px;
    font-weight: bold;
    color: #C0C0C0;
    content: "\2714";
    transition-duration: 0.5s;
}
.list5b li:hover:before {
    color: #337AB7;
    content: "\2714";
}

Разделы

Чайник

12/11/2020
Полезные лайфхаки для работы в Microsoft Word

01/11/2020
Снятие парольной защиты с листа Excel

30/10/2020
Сочетания клавиш в Windows

29/10/2020
Отсечение символов из строки excel

Юзер

28/07/2022
DiskPart

18/11/2020
Надстройки для Microsoft Office

13/11/2020
Таблица Alt-кодов

31/10/2020
Распиновка блока питания компьютера

Админ

11/11/2021
Иконки Font Awesome 4.7

02/07/2021
Настройки Windows

05/06/2021
Как изменить порт службы RDP с 3389 на другой

15/01/2021
Ссылки с svg иконками по mime-type

Оформление списков для информационных блоков

Пример:

HTML:

CSS:

Разделы

Популярные статьи

Последние материалы

Похожие статьи

Разделы

Чайник

12/11/2020 Полезные лайфхаки для работы в Microsoft Word

01/11/2020 Снятие парольной защиты с листа Excel

30/10/2020 Сочетания клавиш в Windows

29/10/2020 Отсечение символов из строки excel

Юзер

28/07/2022 DiskPart

18/11/2020 Надстройки для Microsoft Office

13/11/2020 Таблица Alt-кодов

31/10/2020 Распиновка блока питания компьютера

Админ

11/11/2021 Иконки Font Awesome 4.7

02/07/2021 Настройки Windows

05/06/2021 Как изменить порт службы RDP с 3389 на другой

15/01/2021 Ссылки с svg иконками по mime-type

Оформление списков для информационных блоков

Пример:

HTML:

CSS:

Разделы

Популярные статьи

Последние материалы

Похожие статьи

12/11/2020
Полезные лайфхаки для работы в Microsoft Word

01/11/2020
Снятие парольной защиты с листа Excel

30/10/2020
Сочетания клавиш в Windows

29/10/2020
Отсечение символов из строки excel

28/07/2022
DiskPart

18/11/2020
Надстройки для Microsoft Office

13/11/2020
Таблица Alt-кодов

31/10/2020
Распиновка блока питания компьютера

11/11/2021
Иконки Font Awesome 4.7

02/07/2021
Настройки Windows

05/06/2021
Как изменить порт службы RDP с 3389 на другой

15/01/2021
Ссылки с svg иконками по mime-type