Авторизация на сайте

Последнее из портфолио

Как с нами связаться

  • 8 953 242 0439
  • +7 953 242 0439
  • ws-aprel@ya.ru
  • *******
  • Россия, г. Горячий Ключ
» » » Красивый список с помощью CSS

Красивый список с помощью CSS

galina2601 1-11-2017, 20:00 4 487 Уроки по CSS / Списки
  1. Элемент списка
  2. Элемент списка
  3. Элемент списка
  4. Элемент списка
  5. Элемент списка

Красивый список?

Причем, это не просто список, а список ссылок. Его вполне можно использовать в качестве меню.

А сделать такую красоту совсем просто.

Итак, это сам код списка. Абсолютно обычный:

<ol class="rounded">   
   <li><a href="#">Элемент списка</a></li>
   <li><a href="#">Элемент списка</a></li>
   <li><a href="#">Элемент списка</a></li>   
   <li><a href="#">Элемент списка</a></li>   
   <li><a href="#">Элемент списка</a></li> 
</ol>

А это набор стилей для списка:

.rounded { 
  counter-reset: li;
  list-style: none;
  font: 14px "Trebuchet MS", "Lucida Sans";
  padding: 0;
  text-shadow: 0 1px 0 rgba(255,255,255,.5); 
}
.rounded a {
 position: relative;
 display: block;
 padding: .4em .4em .4em 2em;
 margin: .5em 0;
 background: #DAD2CA;
 color: #444;
 text-decoration: none;
 border-radius: .3em;
 transition: .3s ease-out; 
}
.rounded a:hover {
 background: #E9E4E0;
} 
.rounded a:hover:before {
 transform: rotate(360deg);
} 
.rounded a:before {
 content: counter(li);
 counter-increment: li;
 position: absolute;
 left: -1.3em;
 top: 50%;
 margin-top: -1.3em;
 background: #8FD4C1;
 height: 2em;
 width: 2em;
 line-height: 2em;
 border: .3em solid white;
 text-align: center;
 font-weight: bold;
 border-radius: 2em;
 transition: all .3s ease-out; 
}

Похожие новости

  • Многоуровневые списки с помощью html и css
  • Как сделать красивый маркер в списке
  • Полный аудит сайта. Часть 6
  • Создание простой таблицы
  • Урок 4. Создание списков

  • Добавить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
    Кликните на изображение чтобы обновить код, если он неразборчив