Как сделать текучий фон

Как сделать текучий фон

Проблема

В последние несколько лет в веб-дизайне набирает популярность новое направление, которое я бы назвал «текучая ширина фона, фиксированная ширина содержимого». Типичные характеристики подобного шаблона включают:

  • несколько разделов, каждый из которых занимает всю ширину просмотрового окна, с разным оформлением фона;
  • ширина содержимого фиксирована, даже если конкретное значение ширины варьируется в зависимости от разрешения экрана, так как для управления шириной используются медиазапросы. В некоторых случаях ширина содержимого в разных разделах может различаться.

как сделать текучий фон

 

Иногда веб-сайт целиком состоит из разделов, стилизованных вышеописанным образом. Чаще всего данный вариант оформления используется только для отдельных разделов, в частности нижнего колонтитула.

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

HTML
<footer>
<div class=»wrapper»>
<!— Здесь находится содержимое нижнего колонтитула —>
</div>
</footer>
CSS-код обычно включает правила, структурированные как в примере ниже:
footer {
background: #333;
}
.wrapper {
max-width: 900px;
margin: 1em auto;
}

 

Выглядит знакомо? Большинству веб-дизайнеров и разработчиков приходилось на том или ином этапе своей карьеры писать подобный код. Действительно ли дополнительные элементы — это неизбежное зло или современный уровень CSS позволяет избежать их использования?

Решение

Давайте подумаем, какую роль в данном случае играет  margin: auto. Поле, которое создается этим правилом, равно половине ширины просмотрового окна за вычетом половины ширины страницы. Так как процентные значения у нас завязаны на ширину окна просмотра (при условии, что у него не существует предка с явно определенной шириной), в нашем случае это выглядит как  50% — 450px . Однако функция calc() , определенная в CSS Values andUnits Level 3, позволяет использовать такие простые математические выражения прямо в таблице стилей. Заменив  auto на calc(), мы получим такое правило-обертку:

Читайте также  Как задать ширину столбцов таблицы

.wrapper {
max-width: 900px;
margin: 1em calc(50% — 450px);
}

Единственная причина, почему нам требовался второй элемент-обертка, — необходимость применять волшебное ключевое слово  auto к его полю посредством свойства  margin. Однако мы избавились от колдовства и заменили его обычным  calc(), то есть теперь это всего лишь еще один размер в CSS, который можно указывать для любого свойства, принимающего подобные значения. Таким образом, при желании мы можем использовать его с родительским элементом в свойстве  padding:

footer {
max-width: 900px;
padding: 1em calc(50% — 450px);
background: #333;
}
.wrapper {}

Как вы видите, благодаря этому мы убрали весь CSS-код из обертки, что означает, что она нам больше не требуется и мы можем спокойно удалить ее из нашей разметки. Мы создали требуемый стиль безо всяких лишних элементов HTML. Можно ли дополнительно улучшить его? Как всегда, ответ положительный. Обратите внимание, что если закомментировать объявление  width , то ничего не произойдет.

Визуальный результат будет точно таким же, и поведение тоже не изменится, независимо от размера окна просмотра. Почему же? Потому что забивка, равная  50% — 450px , все равно оставляет только 900px ( 2 × 450px ) доступного пространства.

Мы бы увидели отличия, если бы значение  width отличалось от  900px в большую или меньшую сторону. Но мы в любом случае получаем именно  900px , поэтому объявление ширины избыточно, и мы можем убрать его, следуя заветам DRY.

Еще одно усовершенствование не помешало бы, чтобы обеспечить обратную совместимость. Нам следует добавить резервное решение, чтобы получать хоть какую-то забивку в ситуации, когда  calc() не поддерживается:

footer {
padding: 1em;
padding: 1em calc(50% — 450px);
background: #333;
}

 

Готово! Мы добились гибкого, соответствующего принципам DRY и обеспечивающего обратную совместимость результата, написав всего лишь три  строки CSS-кода безо всякой лишней разметки!

Читайте также  Центрирование по вертикали

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/fluid-fixed

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: