Создание меню в ромбовидной сетке с использованием 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%; }
Еще используются media queries, чтобы меню хорошо выглядело на маленьких экранах, можете рассмотреть это в демонстрации на сайте CodePen.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
-
Бесплатный весенний вектор
-
Сайты, посвященные свадьбам
-
Милый графический дизайн от Клаудии Бордин
-
Красивый текстовый 3D-эффект в Adobe Photoshop
-
Вектор в стиле ретро для вашего дизайна
-
Монохромный веб-дизайн
-
Японский стиль в изобразительном искусстве
-
Тонированные изображения с помощью множественных фоновых изображений
-
Строгие узоры и иллюстрации от Гарри Голдхока
-
Бесплатные весенние фотографии
-
Яркое на темном в веб-дизайне
-
20 крутых примеров нейл-арта
-
Бесплатный клипарт лепестков
-
Разные шрифты на одной веб-странице
Самые комментируемые
- 50 прикольных страниц ошибки 404
90
- Flash и HTML5 для клиентов, разработчиков и пользователей. Откручиваем гайки.
88
- 16 лучших бесплатных графических редакторов
70
- Интервью с fashion-иллюстратором Lilit Sarkisian
64
- Дизайн схемы проезда
62
- 12 сайтов, на которых можно продавать свои работы
61
- 370 экшенов для фотошопа
58
- Как выглядят сайты дизайнерских вузов - их и наши
58