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

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

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

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

Еще один красивый список с помощью CSS

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

Этот список тоже весьма интересен.

При наведении на строку, слева, рядом с номером, появляется небольшая стрелка. Плюс сама строка слегка меняет цвет. Да, вы же понимаете, что цветовую гамму можно задать любую.

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

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

<ol class="rectangle">   
   <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>

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

.rectangle {
counter-reset: li; 
list-style: none; 
font: 14px "Trebuchet MS", "Lucida Sans";
padding: 0;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.rectangle a {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
margin: .5em 0 .5em 2.5em;
background: #D3D4DA;
color: #444;
text-decoration: none;
transition: all .3s ease-out;
}
.rectangle a:hover {background: #DCDDE1;}       
.rectangle a:before {
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #9097A2;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.rectangle a:after {
position: absolute;
content: "";
border: .5em solid transparent;
left: -1em;
top: 50%;
margin-top: -.5em;
transition: all .3s ease-out;
}
.rectangle a:hover:after {
left: -.5em;
border-left-color: #9097A2;
}

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

  • Красивый список с помощью CSS
  • Многоуровневые списки с помощью html и css
  • Как сделать красивый маркер в списке
  • Создание простой таблицы
  • Урок 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
    Кликните на изображение чтобы обновить код, если он неразборчив