От автора: благодаря flexbox сегодня мы можем с легкостью создавать по-настоящему привлекательные и современные макеты. В этом уроке мы с вами разберем интерфейс, который совсем недавно появился на сайте Google National Parks, а также узнаем, как flexbox поможет нам улучшить его.
И как всегда, перед погружением давайте посмотрим на конечный результат. Посмотрите большую версию, так как эффект виден только на экранах с шириной более 800px:
Наведите курсор мыши на ссылки, чтобы сработал эффект.
Разметка
Сперва давайте разберем разметку, которая будет лежать в основе этого макета. Необходимо создать блок div и поместить в него 5 ссылок. Можно использовать любые подходящие теги. В каждой ссылке должен быть div с классом overlay. Структура кода:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="flex-wrapper"> <a href="" class="one"> <div class="overlay"> <div class="overlay-inner"> <h2>Title #1</h2> <p>Fusce vulputate orci at nulla consequat, ac tincidunt quam ultrices.</p> </div> </div> </a> <!—еще 4 ссылки --> </div> |
Базовые стили
С разметкой закончили. Теперь необходимо прописать базовые стили:
Самый внешний div должен быть флекс-контейнером, а его высота должна равняться высоте экрана, т.е. height: 100vh.
Все ссылки должны быть одной ширины (флекс-элементы). Для этого необходимо указать ссылкам свойство flex: 1. Кроме того, у всех ссылок будет фоновое изображение по высоте окна браузера. Также всем ссылкам необходимо задать уникальный цвет фона.
При наведении курсора мыши на ссылку ее размер увеличивается в 3 раза по отношению к остальным ссылкам. Делается это путем изменения значения свойства flex у целевой ссылки. К счастью для нас, это свойство можно анимировать. Мы можем сгенерировать плавный переход (почти во всех современных браузерах).
Часть CSS кода ниже демонстрирует то, что мы только что описали:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.flex-wrapper { display: flex; height: 100vh; } .flex-wrapper a { position: relative; flex: 1; background-size: cover; background-position: center; background-repeat: no-repeat; transition: flex .4s; } .flex-wrapper .one { background-image: url(IMAGE_PATH); background-color: red; } .flex-wrapper a:hover { flex: 3; } |
Если теперь открыть демо в браузере с поддержкой flexbox, мы увидим:
Стили перекрывающего слоя
Следующим нашим шагом будет написание стилей для перекрывающего слоя. Нам необходимо сделать:
Задать перекрывающему слою размеры родительской ссылки. Сделать это можно с помощью абсолютного позиционирования по отношению к ближайшему родителю, указав при этом нулевые значения смещений.
Слой наложения необходимо превратить в флекс-контейнер, после чего мы сможем центрировать его прямые дочерние элементы по горизонтали и вертикали (то есть элемент .overlay-inner).
Необходимо добавить перекрывающему слою полупрозрачный серый фоновый цвет при наведении курсора мыши на родительскую ссылку.
Соответствующие стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.flex-wrapper .overlay { display: flex; align-items: center; justify-content: center; padding: 0 10px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: background-color .4s; } .flex-wrapper a:hover .overlay { background-color: rgba(0, 0, 0, .5); } |
Внутренняя часть перекрывающего слоя
Теперь необходимо стилизовать внутренние части слоя наложения. По умолчанию они скрыты и должны появляться только при наведении курсора мыши на соответствующую родительскую ссылку. Однако происходить это будет не сразу, а с небольшой задержкой. Задержка очень важна. Если ее не задать, плавный переход будет выглядеть немного страшно. Удалите задержку и посмотрите, как изменилось демо, чтобы понять.
Подытожим: сначала ссылка становится больше, и только потом появляется перекрывающий слой. Для создания слайд эффектов мы также использовали свойство translate3d(). Последнее, но не менее важное – для предотвращения эффекта мигания в некоторых браузерах мы использовали хак transform-style: preserve-3d (или что-то похожее). Соответствующие стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.flex-wrapper .overlay-inner * { visibility: hidden; opacity: 0; transform-style: preserve-3d; } .flex-wrapper .overlay h2 { transform: translate3d(0, -60px, 0); } .flex-wrapper .overlay p { transform: translate3d(0, 60px, 0); } .flex-wrapper a:hover .overlay-inner * { opacity: 1; visibility: visible; transform: none; transition: all .3s .3s; } |
Добавляем адаптивность
Страница хорошо смотрится на больших экранах, но, пожалуй, на маленьких и даже средних экранах нам придется внести пару изменений. К примеру, нам нужно сделать:
Перевернуть главную ось флекс-контейнера с помощью flex-direction: column, после чего флекс-элементы перестроятся в вертикальное положение.
Отменить все плавные переходы и показывать перекрывающие элементы по умолчанию.
Для настольных ПК медиа запросы будут выглядеть следующим образом. Я использовал только разрешение 800px, так как именно оно используется в демо. Вы можете выбрать любое другое.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
@media screen and (max-width: 800px) { .flex-wrapper { flex-direction: column; } .flex-wrapper a:hover { flex: 1; } .flex-wrapper a:hover .overlay { background-color: transparent; } .flex-wrapper .overlay h2, .flex-wrapper .overlay p { opacity: 1; visibility: visible; transform: none; } } |
Конечный вариант меню:
Поддержка в браузерах
Демо работает во всех современных браузерах с поддержкой flexbox. В некоторых браузерах анимация свойства flex может быть не такой плавной или вообще не работать. К примеру, IE11 не анимирует это свойство, а Edge анимирует. Случай с IE можно понять, так как flexbox еще считается новым режимом макетирования и до сих пор набирает обороты.
Заключение
В этом уроке мы узнали чуть-чуть больше о flexbox, создав стильное меню. Надеюсь, вам понравился наш макет, и вы почерпнете из него что-нибудь в свои следующие проекты! Если будете создавать похожий макет, не забудьте рассказать нам про ваш подход (чистый CSS или JS).
Автор: George Martsoukos
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
