Создание меню в ромбовидной сетке с использованием CSS

27 июня 2016 | Опубликовано в css | 1 Комментарий »

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

Изображения в ромбах

Основная идея изображения в ромбовидной рамке довольно простая, рекомендуем прочитать книгу Lea Verou для более подробного и точного описания способа и его вариантов. Простой способ, разбитый на пять шагов, выглядит следующим образом:

Шаг 1: Создать рамку для изображения

Многие элементы могут работать как рамка. В примере выше используется тег <a> для создания изображения с ссылкой. Элемент ссылки делается квадратным с помощью значения inline-block и задания высоты. Для простоты используемые изображения тоже квадратные, хотя это и не требуется.

Шаг 2: Поворачиваем рамку

Рамка поворачивается на 45 градусов, при этом поворачивается и изображение, и любое другое содержимое внутри.

Шаг 3: Поворачиваем изображение, чтобы компенсировать

Поворачиваем назад содержимое рамки на противоположное количество градусов, чтобы изображение снова стало квадратным. Для этого используем тег <img> , а не фоновые изображения: у них по меньшей мере пока что нет трансформации фона.

Шаг 4: Масштабируем изображение, чтобы оно заполнило собой всю рамку

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

Шаг 5: Удаляем переполнение

Задаем свойство скрытия переполнения элементу, чтобы обрезать излишки изображения, расположенные за рамкой.

Фоновая сетка

Мы хотели, чтобы три ссылки находились среди других ромбовидных изображений. Хотя это можно создать с помощью кода HTML и CSS, мы решили схитрить и сделать их фоновым изображением с помощью программы Photoshop.

Фон для меню в ромбовидной сетке

Это упростило разметку для меню в примере:

<div id="pure-container">
        <a href="#" id="woman"><img src="woman.jpg" alt><span>Women</span></a>
        <a href="#" id="man"><img src="man.jpg" alt><span>Men</span></a>
        <a href="#" id="child"><img src="child.jpg" alt><span>Children</span></a>
</div>

Из-за того, что ссылки абсолютно спозиционированны, блоку класса .pure-container нужен внутренний отступ. Полный код CSS:

#pure-container {
        background: url(mesh-grid-background-2x.jpg);
        position: relative;
        padding-top: 68%;
        background-size: cover;
        overflow: hidden;
        }
#pure-container a {
        display: inline-block;
        position: absolute;
        width: 33%;
        height: 48.4%;
        transform: rotate(45deg);
        top: 0;
        overflow: hidden;
        opacity: 0.5;
        transition: .6s opacity;
        color: #fff;
        font-family: Avenir, sans-serif;
        text-transform: uppercase;
        letter-spacing: .2rem;
        font-size: .5rem;
        text-shadow: 0 0 5px rgba(0,0,0,0.4);
        }
#pure-container a:hover, #pure-container a.highlighted {
        opacity: 1;
}
#pure-container a span {
        display: inline-block;
        transform: rotate(-45deg);
        position: relative;
        z-index: 5;
        text-align: center;
        width: 100%;
        left: 25%;
        top: -36%;
        font-size: 2rem;
}
#pure-container a img {
        width: 100%;
        transform: rotate(-45deg) scale(1.4);
}

Как упоминалось выше, у всех ссылок абсолютное позиционирование и используются относительные единицы измерения, так что все меню адаптивное:

a#woman {
        margin-top: 3.2%;
        left: 34.4%;
}
a#man {
        margin-top: 26.4%;
        left: 11%;
}
a#child {
        left: 57.8%;
        margin-top: 26.5%;
}