24.09.2021
d65b9e31e8f40c3035741db1d870ee7a

Использование CSS-форм для элементов управления и навигации

Внедрение CSS-форм для элементов  управления и навигации

От создателя: прямо горизонтально или вертикально — это общеизвестный порядок пользовательских частей управления на экране. Как список пт меню. Но что, если мы изменим его на макет с извивами, кривыми и уклонами? Мы можем выполнить это с помощью всего нескольких строк кода. В эру современного минималистичного дизайна изогнутые макеты для пользовательских частей управления придают веб-дизайну нужную изюминку.

И кодировать их очень просто, благодаря CSS формам (CSS Shapes). CSS формы являются эталоном, который присваивает геометрические формы гибким элементам. Потом содержимое обтекает гибкий элемент по границам этих форм.

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

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

CSS

Изображение бутылки перемещается влево и задается границей формы с помощью характеристики shape-outside. Само изображение ссылается на форму.

Примечание. Только изображения с прозрачным фоном имеют возможность создавать формы в соответствии с силуэтами изображений.

Стиль по умолчанию для тумблеров (radio buttons) заменен на собственный стиль. Как только браузер применяет форму к плавающему изображению, тумблеры автоматически выравниваются по форме бутылки.

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

Вот еще один пример, воодушевленный домашней страницей Википедии. Это прекрасный пример необычного макета главного меню, который мы рассматриваем.

Внедрение CSS-форм для элементов  управления и навигации

Это не так уж и трудно, если использовать shape-outside:

CSS

Элемент всегда перемещается только влево или вправо. Нет центрального плавающего элемента, где контент обтекает обе стороны. Чтоб добиться дизайна, в котором ссылки размещаются по обеим сторонам изображения, я сделал два набора ссылок и перевернул один из их по горизонтали. Я использовал одно и то же изображение с значением CSS формы circle() в обоих наборах, потому формы совпадают даже после поворота. Текст ссылок перевернутого набора будет отображаться в перевернутом виде с боковой стороны, поэтому он будет повернут обратно.

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

3-ий пример немного интереснее благодаря использованию 1-го из динамических HTML элементов, <details>. Эта демонстрация является неплохим примером дизайна, показывающего дополнительную информацию о продуктах, которая по умолчанию укрыта от пользователей.

CSS

Изображение перемещается влево и имеет CSS форму, аналогичную изображению. Свойство shape-margin добавляет отступ места вокруг формы плавающего элемента. При клике по элементу <summary>, родительский элемент <details> открывает свое содержимое, которое автоматически обтекает форму плавающего ромбовидного изображения.

Содержимое элемента <details> не непременно должно быть списком, как в демонстрации. Хоть какой встроенный контент будет обтекать фигуру плавающего изображения.

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

CSS

Красноватый треугольник создается с использованием свойств границы. Чтоб создать треугольную CSS фигуру, которая соответствует красноватому треугольнику, мы используем функцию многоугольника в качестве значения для характеристики shape-outside. Значение функции polygon() — это три координаты треугольника, разбитые запятыми. Ссылки автоматически выравниваются вокруг плавающего треугольника, образуя наклонный макет меню по гипотенузе треугольника.

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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *