резиновая типографика Гибкая типографика с помощью CSS «lock»

В начале 2012 года я поделился формулой для «Molten leading» (резиновый line-height). Опытные типографы знают, что более длинным строкам в тексте нужно больше межстрочного интервала, а для коротких строк расстояние может быть плотным. Проблема заключается в том, что текст должен быть резиновым. Таким образом, наш межстрочный интервал должен быть гибким:   Некоторые люди, узнав о формуле, реализовали […]

анимируем иконку гамбурег Анимированная иконка «Гамбургер» на CSS

Вы можете воспользоваться Font Awesome  или взять изображение, чтобы создать данную иконку, но это не обязательно. Вместо этого вы можете создать «гамбургер» только с помощью CSS и следующей разметки.  

  В следующих CSS стилях с помощью  span  мы создадим серединку «гамбургера»  и используем  псевдо-элементы  для создания булочек.

  Разметка и   стили представлены в […]

как прижать footer Как прижать Footer?

Существует много разных способов прижатия футера к низу страницы, но этот как по мне самый удобный и понятный, а главное работающий. Ниже представлена HTML разметка и необходимые стили. HTML

  CSS

Уберем появившийся скролл и натянем наш footer на wrapper:

Теперь наш  footer залез под wrapper, приорететы поменялись, так как у wrapper  свойство position:relative, а у footer отрицательный отступ […]

выравниваем элементы с помощь text-align:justify Выравниваем элементы по ширине с помощью text-align: justify

В этом посте хотел бы поделиться с вами простым хаком, который сэкономит время при верстке горизонтального меню или, например, навигации. Когда придется что-то менять в сверстанном сайте, а заказчик скорее всего захочет изменения в дальнейшем, то блок с элементами не поедет и при добавлении новых элементов вам не придется рассчитывать отступы и ширину элементов, а если […]