Давайте посмотрим, как мы можем создать ряд ссылок, которые как бы наталкиваются друг на друга с шевроноподобной формой и надрезом на каждом блоке, как вы могли бы видеть в иерархической навигационной системе.
Вы, наверное, часто видели этот паттерн. Это часто встречается в таких вещах, как многошаговые формы и панировочные сухари. Для наших целей мы будем называть эти «ленты», поэтому мы знаем, что мы имеем в виду, когда мы идем.
Подобно многим вещам в Интернете, мы можем создавать подобные ленты разными способами! Я создал демонстрационную страницу, которая объединяет различные из них, например, с использованием треугольников CSS, фонов SVG и свойства clip-path CSS .
Для каждой демонстрации структура HTML будет в основном такой же, где у нас есть
который действует как родительский элемент, а затем связывает внутри него как дочерние элементы.
Главная
Блог
сообщение
Обратите внимание, что эти элементы должны быть доступны, согласно веб-сайту A11y Style Guide. Хорошим правилом является создание компонентов с учетом доступности, и введение доступности с самого начала — лучший способ предотвратить классическую ситуацию «Я забыл сделать ее доступной».
Давайте создадим несколько базовых стилей Когда дело доходит до таких вещей, мы хотим убедиться, что размеры элементов сделаны правильно. Для этого мы собираемся определить размер шрифта элемента оболочки .ribbon (именно так мы будем называть эти вещи) и затем использовать em единиц на дочернем элементе. элемент, который сами ссылки.
/ * Определить размер шрифта элемента оболочки * /
.ribbon {
размер шрифта: 15 пикселей;
}
/ * Используйте ems для определения размера элемента ленты * /
.ribbon__element {
размер шрифта: 1,5em;
межбуквенный интервал: 0,01em;
высота строки: 1.333em;
набивка: 0,667em 0,667em 0,667em 1,333em;
}
Этот конкретный метод будет полезен для определения размера формы треугольника для каждой ленты, потому что мы будем использовать одинаковые размеры для вычисления треугольника. И поскольку мы используем единицы em для вычисления размера элемента ленты, мы можем изменить размеры всех элементов, переопределив font-size для элемента оболочки.
Давайте используем CSS Grid для макета, потому что, ну, мы можем. Мы могли бы сделать это таким образом, чтобы обеспечить более глубокую поддержку браузера, но мы оставим это на ваше усмотрение, исходя из ваших требований к поддержке.
Мы собираемся определить четыре столбца:
Три для ленточных элементов
Один, чтобы исправить проблемы с пробелами. Таким образом, правильная форма стрелки будет размещена вне компонента ленты, и это может испортить первоначальный макет.
/ * Элемент оболочки
* Мы используем CSS Grid, но убедитесь, что он соответствует требованиям поддержки вашего браузера.
* Предполагается использование автоматического префикса для префиксов и свойств вендора.
* /
.ribbon {
дисплей: сетка;
разрыв сетки: 1px;
grid-template-columns: repeat (auto-fill, 1fr) 1em; / * Автоматическое заполнение трех ленточных элементов плюс один узкий столбец для устранения проблем с размерами * /
}
Если вы предпочитаете не растягивать ленточные элементы, сетка может быть определена иначе. Например, мы могли бы использовать max-content для настройки столбцов по размеру контента. (Обратите внимание, что max-content пока не очень хорошо поддерживается в некоторых ключевых браузерах.)
/ * Настройка ленточных столбцов на максимальный размер содержимого * /
.ribbon - auto {
grid-template-columns: repeat (3, max-content) 1em;
}
Я уверен, что есть много разных способов, которыми мы могли бы сделать макет. Мне нравится этот, потому что он определяет точный зазор между элементами ленты без сложных вычислений.
Доступность — это не только добавление атрибутов арии. Он также включает в себя цветовой контраст и удобочитаемость, а также добавление состояний наведения и фокуса. Если вам не нравится стиль контура вы можете использовать другие свойства CSS, например, например box-shadow .
/ * Использовать текущий цвет ссылки, но добавить подчеркивание при наведении курсора * /
.ribbon__element: парить,
.ribbon__element: active {
цвет: наследовать;
текстовое оформление: подчеркивание;
}
/ * Очистить стиль контура по умолчанию и использовать теневую рамку для состояния фокуса * /
.ribbon__element: focus {
тень от рамки: вставка 0 -3px 0 0 # 343435;
контур: нет;
}
Создание уникальной треугольной формы У нас есть несколько вариантов определения треугольника в конце каждой ленты. Мы могли бы:
Мы могли бы создать треугольник, используя границы с псевдоэлементами
Мы могли бы использовать фоновое изображение SVG для псевдоэлементов
Мы могли бы использовать встроенные изображения SVG
Мы могли бы создать клип-путь используя функцию polygon ()
Давайте копаться в каждом.
Вариант 1: пограничный подход Во-первых, мы должны установить ширину и высоту элемента равными нулю, чтобы он не мешал псевдоэлементам, которые мы используем для рисования треугольника с границами. Затем мы должны нарисовать треугольник, используя границы, в частности, определив сплошную левую границу, которая соответствует цвету фона, чтобы он сливался с остальной частью ленты. Оттуда давайте определим верхнюю и нижнюю границы и сделаем их прозрачными. Хитрость в том, чтобы рассчитать размер границы.
Наш элемент ленты имеет размер содержимого значения line-height плюс верхний и нижний отступы:
0,333em + 0,667em + 0,667em = 2,667em
Это означает, что наши верхняя и нижняя границы должны быть вдвое меньше. Осталось только расположить элементы абсолютно с правильной стороны компонента.
/ * Стрелка влево * /
.ribbon - альфа .ribbon__element: перед {
/ * Сделать размер содержимого нулевым * /
содержание: '';
высота: 0;
ширина: 0;
/ * Используйте границы, чтобы псевдоэлемент соответствовал размеру ленты * /
бордюр: 1.333em сплошной прозрачный;
граница слева: 0,667em сплошной #fff;
бордюр: 1.333em прозрачный;
/ * Расположить элемент абсолютно слева от элемента ленты * /
положение: абсолютное;
верх: 0;
низ: 0;
слева: 0;
}
/ * Стрелка вправо * /
.ribbon - альфа .ribbon__element: после {
/ * Сделать размер содержимого нулевым * /
содержание: '';
высота: 0;
ширина: 0;
/ * Используйте границы, чтобы псевдоэлемент соответствовал размеру ленты * /
бордюр: 1.333em сплошной прозрачный;
граница слева: 0,667em сплошная;
бордюр: 1.333em прозрачный;
/ * Расположите элемент абсолютно справа от ленточного элемента и вытолкните его наружу * /
положение: абсолютное;
верх: 0;
справа: 0;
низ: 0;
-webkit-transform: translateX (0,667em);
transform: translateX (0,667em);
}
Поскольку прямоугольный треугольник должен соответствовать цвету фона ленты, не забудьте добавить правильный цвет границы для каждого псевдоэлемента ленты.
/ * Стрелка вправо первого элемента * /
.ribbon - альфа .ribbon__элемент: nth-child (1): после {
Цвет рамки слева: # 11d295;
}
/ * Стрелка вправо второго элемента * /
.ribbon - альфа .ribbon__элемент: nth-child (2): после {
Цвет рамки слева: # ef3675;
}
/ * Стрелка вправо третьего элемента * /
.ribbon - альфа .ribbon__элемент: nth-child (3): после {
Цвет рамки слева: # 4cd4e9;
}
А вот и мы!
См. Ручку
Вариант 2. Подход к фоновому изображению Мы также можем создать треугольник, используя фоновое изображение. Это требует создания изображения, соответствующего дизайну, что немного громоздко, но все же возможно. Мы собираемся использовать SVG здесь, поскольку он плавный при любом разрешении.
В отличие от подхода пограничного треугольника, мы хотим сопоставить высоту нашего псевдоэлемента с высотой элемента ленты, или 100%. Ширина компонента должна соответствовать ширине левой границы треугольника границы, которая в нашем случае составляет 0,666666em. Затем мы должны использовать белый треугольник для фонового изображения на треугольнике с левой стороны, а затем использовать треугольные изображения с цветом для треугольников с правой стороны. Опять же, мы используем абсолютное позиционирование для размещения наших треугольников на правильной стороне элемента ленты.
/ * Стрелка влево * /
.ribbon - бета .ribbon__element: перед {
/ * Определить размер стрелки * /
содержание: '';
высота: 100%;
ширина: 0,666666em;
/ * Определить фоновое изображение, которое соответствует цвету фона * /
фоновое изображение: URL (данные: изображения / SVG + XML; base64, PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZmZmIj48cGF0aCBkPSJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4 =);
background-position: в центре слева;
повторение фона: без повтора;
размер фона: 100%;
/ * Расположить элемент абсолютно слева от элемента ленты * /
положение: абсолютное;
низ: 0;
верх: 0;
слева: 0;
}
/ * Стрелка вправо * /
.ribbon - бета .ribbon__element: после {
/ * Определить размер стрелки * /
содержание: '';
высота: 100%;
ширина: 0,667 мм;
/ * Определить атрибуты фонового изображения * /
background-position: в центре слева;
повторение фона: без повтора;
размер фона: 100%;
/ * Расположите элемент абсолютно справа от ленточного элемента и вытолкните его наружу * /
положение: абсолютное;
верх: 0;
справа: 0;
низ: 0;
-webkit-transform: translateX (0,667em);
transform: translateX (0,667em);
}
/ * Определить фоновое изображение, которое соответствует цвету фона первого элемента * /
.ribbon - бета .ribbon__element: nth-child (1): после {
фоновое изображение: URL (данные: изображения / SVG + XML; base64, PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsPSIjMTFkMjk1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4 =);
}
/ * Определить фоновое изображение, которое соответствует цвету фона второго элемента * /
.ribbon - бета .ribbon__element: nth-child (2): после {
фоновое изображение: URL (данные: изображения / SVG + XML; base64, PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsPSIjZWYzNjc1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4 =);
}
/ * Определить фоновое изображение, которое соответствует цвету фона третьего элемента * /
.ribbon - бета .ribbon__element: nth-child (3): после {
фоновое изображение: URL (данные: изображения / SVG + XML; base64, PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsPSIjNGNkNGU5IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4 =);
}
Вот и мы!
См. Ручку
Вариант 3: встроенный SVG-подход Вместо загрузки различного SVG-треугольника для каждого фонового изображения, мы могли бы использовать встроенный SVG непосредственно в HTML.
Этот конкретный подход позволяет нам контролировать цвет заливки каждой стрелки SVG с помощью CSS. Размер стрелки рассчитывается по размеру ленты. Опять же, мы используем единицы измерения em для определения размера, а стрелки расположены абсолютно точно так же, как и другие подходы, которые мы видели до сих пор.
/ * Установить стрелки абсолютно и установить правильный размер * /
.ribbon - гамма .ribbon__element svg {
высота: 2,667 мм;
положение: абсолютное;
верх: 0;
ширина: 0,667 мм;
}
/ * Стрелка влево * /
.ribbon - гамма .ribbon__element svg: первый ребенок {
fill: #fff; / * Определить фоновое изображение, которое соответствует цвету фона * /
слева: 0; / * Прикрепите стрелки влево к левой стороне элемента ленты * /
}
/ * Стрелка вправо * /
.ribbon - гамма .ribbon__element svg: last-child {
слева: 100%; / * Нажмите стрелки вправо за пределами элемента ленты * /
}
/ * Определить цвет заливки, который соответствует цвету фона первого элемента * /
.ribbon - гамма .ribbon__element: nth-child (1) svg: last-child {
заполните: # 11d295;
}
/ * Определить цвет заливки, соответствующий цвету фона второго элемента * /
.ribbon - гамма .ribbon__element: nth-child (2) svg: last-child {
заполните: # ef3675;
}
/ * Определить цвет заливки, соответствующий цвету фона третьего элемента * /
.ribbon - гамма .ribbon__element: nth-child (3) svg: last-child {
заполните: # 4cd4e9;
}
См. Ручку
Вариант 4: Подход клипа-пути Мы можем создать ленточные треугольники с многоугольником, маскирующим фон. Firefox Shape Editor — это фантастический инструмент для рисования фигур прямо в браузере с графическим интерфейсом как и Clippy.
Так как полигоны должны быть созданы с использованием процентов, мы должны использовать наше лучшее суждение, чтобы соответствовать размеру граничных треугольников. Также обратите внимание, что процентные полигоны могут выглядеть немного забавно в некоторых окнах просмотра, особенно когда размеры элементов адаптируются к его окружению, например, элементам-оберткам. Подумайте о переопределении полигонов для разных видов.
.ribbon - delta .ribbon__element {
путь обрезки: многоугольник (95% 0, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
}
Так как мы определили наш элемент-обертку с помощью CSS Grid, мы должны расширить элементы ленты, но оставить последний в размере треугольника многоугольника, который в нашем случае составляет 5%. Последний элемент ленты должен быть шире на величину ширины граничного треугольника, чтобы соответствовать первым двум примерам.
/ * Сделать все элементы ленты (кроме последнего) шире на размер многоугольника * /
.ribbon - delta .ribbon__element: not (: last-child) {
ширина: 105%;
}
/ * Сделать последний элемент ленты шире на размер граничного треугольника * /
.ribbon - delta .ribbon__element: last-child {
ширина: calc (100% + .667em);
}
См. Ручку
Варианты этих опций Теперь, когда мы научились создавать ленту крошки несколькими способами, мы могли бы поиграть с ней, например, добавить тени или градиенты и разные размеры.
Добавление тени Мы могли бы добавить тень на наши элементы ленты. Обязательно избегайте тени на левой или правой стороне элемента ленты.
/ * Добавить тень под каждым элементом ленты * /
.ribbon - тень .ribbon__element {
box-shadow: 1px 3px 3px -3px черный;
}
См. Ручку
Использование градиентов для цвета Мы могли бы добавить градиенты к нашему элементу ленты. При этом обязательно подбирайте цвет прямоугольного треугольника. Также убедитесь, что соблюдаете контрастную доступность.
Например, если мы собираемся использовать подход с границами или подход с фоновым изображением, мы должны использовать в основном горизонтальные (то есть слева направо) градиенты (за исключением некоторых тщательно рассчитанных угловых градиентов). Если мы используем подход clip-path мы могли бы использовать любую градиентную версию, какую пожелаем.
/ * Добавить градиент к первому элементу ленты * /
.ribbon - градиент .ribbon__element: nth-child (1) {
background-image: линейный градиент (справа, # 11ced2, # 11d295);
}
/ * Добавить градиент ко второму элементу ленты * /
.ribbon - градиент .ribbon__element: nth-child (2) {
фоновое изображение: линейный градиент (справа, # ef36b2, # ef3675);
}
/ * Добавить градиент к третьему элементу ленты * /
.ribbon - градиент .ribbon__element: nth-child (3) {
background-image: линейный градиент (справа, # 4c9fe9, # 4cd4e9);
}
См. Ручку
Работа с вариациями размера Поскольку размер наших ленточных элементов зависит от размера шрифта элемента-обертки, определить различные размеры довольно просто.
/ * Маленькие ленты * /
.ribbon - маленький {
размер шрифта: 10 пикселей;
}
/ * Большие ленты * /
.ribbon - большой {
размер шрифта: 20 пикселей;
}
Здесь мы рассмотрим меньший набор лент:
См. Ручку
А вот хороший набор коротких лент:
См. Ручку
Объединяя все вещи! Мы также можем комбинировать различные классы модификаторов для достижения еще большего стиля. Например, давайте использовать вместе модификаторы градиента и тени:
См. Ручку
Какие еще аспекты нужно учитывать? Создание пользовательских элементов с использованием различных методов CSS — отличный способ, как каждый из нас может улучшить или обновить свои знания. Перед началом стоит обратить внимание на ремонтопригодность и модульность строящегося компонента. Согласованное соглашение об именах, такое как BEM, безусловно, помогает в этом. Доступность также имеет большое значение, поэтому начните с нее и документируйте специальные возможности на пути к успеху.
Мы рассмотрели четыре различных подхода к рисованию ленточных треугольников. Вы использовали другой подход или знаете тот, который мы здесь не рассматривали? Дайте мне знать в комментариях!
Загрузка...
