• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Оформление списков на CSS
Оформление списков на CSS
workman
Воскресенье, 24 Сентября 2017 | Сообщение 1
Оффлайн
Проверенные
Сообщений:1716
Награды: 9
Так как меня что-то сегодня укусило по видимому, или я не с той ноги встал, чтобы закидывать сюда на раздачу различные украшения )) Предлагаю также анимированные списки, кому вдруг понадобится при украшении своего сайта Картинку вы уже видели, а теперь посмотрите демо и проводя мышкой по спискам не забудьте смотреть на цифры 11a



Так как к сожалению,бываю тут не так часто как хотелось, если вдруг у кого возникнут вопросы, то ссылка стоит в подписи ...

Всем добра!!!

HTML
Код
<ol class="my-list">
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a>
        <ol>
            <li><a href="">Подэлемент списка</a></li>
            <li><a href="">Подэлемент списка</a></li>
            <li><a href="">Подэлемент списка</a></li>
        </ol>
    </li>
    <li><a href="">Элемент списка</a></li>
    <li><a href="">Элемент списка</a></li>      
</ol>

CSS
Код
ol{counter-reset:li;list-style:none;*list-style:decimal;font:15px 'trebuchet MS','lucida sans';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5)}
ol ol{margin:0 0 0 2em}
.my-list a{position:relative;display:block;padding:.4em .4em .4em 2em;*padding:.4em;margin:.5em 0;background:#ddd;color:#444;text-decoration:none;-moz-border-radius:.3em;-webkit-border-radius:.3em;border-radius:.3em;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease- out;transition:all .3s ease-out}
.my-list a:hover{background:#eee}
.my-list a:hover:before{-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}
.my-list a:before{content:counter(li);counter-increment:li;position:absolute;left:-1.3em;top:50%;margin-top:- 1.3em;background:#87ceeb;height:2em;width:2em;line-height:2em;border:.3em solid #fff;text-align:center;font-weight:700;-moz-border-radius:2em;-webkit-border-radius:2em;border-radius:2em;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease- out;-ms-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}
Прикрепления: 2752350.png (34.8 Kb)


Сообщение отредактировал
workman - Воскресенье, 24 Сентября 2017, 14:53
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Оформление списков на CSS
  • Страница 1 из 1
  • 1
Поиск: