Материалы с меткой css

Эффект подчеркивания при наведении на ссылку

2 октября 2017 | CSS

Результат смотрите по ссылке

<ul>
  <li><a href="/">Item 1</a></li>
  <li><a href="/">Item 2</a></li>
  <li><a href="/">Item 3</a></li>
</ul>

li {
  padding: 3px 0;  
}

a {
  position: relative;
  text-decoration: none;
  color: #555;
}

a:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #555; 
  transition: all 0.5s;
}

a:hover:before {
  content: '';
  width: 100%;
}

Метки:

Подробнее

Горизонтальное выравнивание блоков по ширине (мультистрочное)

27 мая 2017 | CSS

Допустим имеется задача создать фотогалерею с горизонтальным выравниванием отдельных ее блоков (фотографий) по ширине.

Метки: ,

Подробнее

Горизонтальное выравнивание блоков по ширине строки

27 мая 2017 | CSS

С появлением модели Flexbox значительно упростилась задача выравнивания блоков, в частности — горизонтального выравнивания блоков по ширине строки (например, для выравнивания пунктов меню).

Метки: , ,

Подробнее