Использование CSS-форм для элементов управления и навигации
И кодировать их очень просто, благодаря CSS формам (CSS Shapes). CSS формы являются стандартом, который присваивает геометрические формы гибким элементам. Затем содержимое обтекает гибкий элемент по границам этих форм.
Сценарии использования такого стандарта обычно демонстрируются как проекты для текстового редакционного контента, где обычный текст обтекает фигуры по бокам. Однако в этом посте вместо простого текста мы используем пользовательские элементы управления, чтобы увидеть, как CSS формы могут вдохнуть плавные силуэты в свои макеты.
На первой демонстрации показан дизайн, который можно использовать на страницах продукта, где любые элементы управления, относящиеся к продукту, могут быть выровнены по форме самого продукта.
CodePen Embed Fallback
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
<form> <img src=”./img/bottle.png” alt=”A tall refreshing and unopened bottle of Coca-Cola, complete with red bottle cap and the classic Coke logo in white.”> <div> <input type=”radio” id=”one” name=”coke” checked> <label for=”one”>One Bottle</label> </div> <div> <input type=”radio” id=”six” name=”coke”> <label for=”six”>Six Pack</label> </div> <div> <input type=”radio” id=”twelve” name=”coke”> <label for=”twelve”>Twelve Pack</label> </div> <div> <input type=”radio” id=”crate” name=”coke”> <label for=”crate”>Entire Crate</label> </div> </form>
| 12345678910111213141516171819 | <form> <img src=”./img/bottle.png” alt=”A tall refreshing and unopened bottle of Coca-Cola, complete with red bottle cap and the classic Coke logo in white.”> <div> <input type=”radio” id=”one” name=”coke” checked> <label for=”one”>One Bottle</label> </div> <div> <input type=”radio” id=”six” name=”coke”> <label for=”six”>Six Pack</label> </div> <div> <input type=”radio” id=”twelve” name=”coke”> <label for=”twelve”>Twelve Pack</label> </div> <div> <input type=”radio” id=”crate” name=”coke”> <label for=”crate”>Entire Crate</label> </div> </form> |
CSS img { height: 600px; float: left; shape-outside: url(“bottle.png”); filter: brightness(1.5); } input { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; margin-left: 20px; box-sizing: content-box; border: 10px solid #231714; border-radius: 50%; background: linear-gradient(45deg, pink, beige); cursor: pointer; }
| 123456789101112131415161718 | img { height: 600px; float: left; shape-outside: url(“bottle.png”); filter: brightness(1.5);}input { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; margin-left: 20px; box-sizing: content-box; border: 10px solid #231714; border-radius: 50%; background: linear-gradient(45deg, pink, beige); cursor: pointer;} |
Изображение бутылки перемещается влево и задается границей формы с помощью свойства shape-outside. Само изображение ссылается на форму.
Примечание. Только изображения с прозрачным фоном могут создавать формы в соответствии с силуэтами изображений.
Стиль по умолчанию для переключателей (radio buttons) заменен на собственный стиль. Как только браузер применяет форму к плавающему изображению, переключатели автоматически выравниваются по форме бутылки.
Таким образом, нам не нужно беспокоиться о индивидуальном назначении позиций для каждого переключателя, чтобы создать дизайн. Любые добавленные позже кнопки будут автоматически выровнены с кнопками перед ними в соответствии с формой бутылки.
Вот еще один пример, вдохновленный домашней страницей Википедии. Это прекрасный пример нестандартного макета главного меню, который мы рассматриваем.
Это не так уж и сложно, если использовать shape-outside:
CodePen Embed Fallback
<div> <img src=”earth.png”> <div class=”left”> <a href=”#”>Formation</a><br> <a href=”#”>Atmosphere</a><br> <a href=”#”>Heat</a><br> <a href=”#”>Gravitation</a> </div> </div> <div> <img src=”earth.png”> <div class=”right”> <a href=”#”>Moon</a><br> <a href=”#”>Climate</a><br> <a href=”#”>Rotation</a><br> <a href=”#”>Orbit</a> </div> </div>
| 123456789101112131415161718 | <div> <img src=”earth.png”> <div class=”left”> <a href=”#”>Formation</a><br> <a href=”#”>Atmosphere</a><br> <a href=”#”>Heat</a><br> <a href=”#”>Gravitation</a> </div></div><div> <img src=”earth.png”> <div class=”right”> <a href=”#”>Moon</a><br> <a href=”#”>Climate</a><br> <a href=”#”>Rotation</a><br> <a href=”#”>Orbit</a> </div></div> |
CSS img { height: 250px; float: left; shape-outside: circle(40%); } /* stack both sets of menus on the same grid cell */ main > div { grid-area: 1/1; } /* one set of menus is flipped and moved sideways over the other */ .right { transform: rotatey(180deg) translatex(250px); } /* links inside the flipped set of menus are rotated back */ .right > a { display: inline-block; transform: rotateY(180deg) translateX(-40px); } /* hide one of the images */ main > div:nth-of-type(2) img { visibility: hidden; }
| 1234567891011121314151617181920 | img { height: 250px; float: left; shape-outside: circle(40%);} /* stack both sets of menus on the same grid cell */main > div { grid-area: 1/1; } /* one set of menus is flipped and moved sideways over the other */.right { transform: rotatey(180deg) translatex(250px); } /* links inside the flipped set of menus are rotated back */.right > a { display: inline-block; transform: rotateY(180deg) translateX(-40px); } /* hide one of the images */main > div:nth-of-type(2) img { visibility: hidden; } |
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Элемент всегда перемещается только влево или вправо. Нет центрального плавающего элемента, где контент обтекает обе стороны. Чтобы добиться дизайна, в котором ссылки располагаются по обеим сторонам изображения, я сделал два набора ссылок и перевернул один из них по горизонтали. Я использовал одно и то же изображение с значением CSS формы circle() в обоих наборах, поэтому формы совпадают даже после поворота. Текст ссылок перевернутого набора будет отображаться в перевернутом виде сбоку, поэтому он будет повернут обратно.
Хотя оба изображения могут располагаться друг над другом без видимого переполнения, лучше всего скрыть одно из них с помощью свойства непрозрачности или видимости.
Третий пример немного интереснее благодаря использованию одного из динамических HTML элементов, <details>. Эта демонстрация является хорошим примером дизайна, показывающего дополнительную информацию о продуктах, которая по умолчанию скрыта от пользователей.
CodePen Embed Fallback
<img src=”diamond.png”> <details> <summary>Click to know more!</summary> <ul> <li>The diamond is now known as the Sancy <li>It comprises two back-to-back crowns <li>It’s likely of Indian origin </ul> </details>
| 123456789 | <img src=”diamond.png”><details> <summary>Click to know more!</summary> <ul> <li>The diamond is now known as the Sancy <li>It comprises two back-to-back crowns <li>It’s likely of Indian origin </ul></details> |
CSS img { height: 200px; float: left; shape-outside: url(“diamond.png”); shape-margin: 20px; } summary { background: red; color: white; cursor: pointer; font-weight: bold; width: 80%; height: 30px; line-height: 30px; }
| 123456789101112131415 | img { height: 200px; float: left; shape-outside: url(“diamond.png”); shape-margin: 20px;}summary { background: red; color: white; cursor: pointer; font-weight: bold; width: 80%; height: 30px; line-height: 30px;} |
Изображение перемещается влево и имеет CSS форму, аналогичную изображению. Свойство shape-margin добавляет отступ пространства вокруг формы плавающего элемента. При клике по элементу <summary>, родительский элемент <details> раскрывает свое содержимое, которое автоматически обтекает форму плавающего ромбовидного изображения.
Содержимое элемента <details> не обязательно должно быть списком, как в демонстрации. Любой встроенный контент будет обтекать фигуру плавающего изображения.
Последний пример работает с многоугольником вместо изображений или простых форм, таких как круг и эллипс. Многоугольники дают нам более угловатые геометрические формы, которые можно легко изменить, добавив к форме еще одну координату.
CodePen Embed Fallback
<img src=”nasa.png”> <div><!– triangle –></div> <ul> <li><a href=”#”>Home</a> <li><a href=”#”>Projects</a> <li><a href=”#”>Shop</a> <li><a href=”#”>Contact</a> <li><a href=”#”>Media</a> </ul>
| 123456789 | <img src=”nasa.png”><div><!– triangle –></div><ul> <li><a href=”#”>Home</a> <li><a href=”#”>Projects</a> <li><a href=”#”>Shop</a> <li><a href=”#”>Contact</a> <li><a href=”#”>Media</a></ul> |
CSS div { width: 0; height: 0; –d: 200px; /* red triangle */ border-right: var(–d) solid transparent; border-bottom: var(–d) solid transparent; border-left: var(–d) solid red; float: left; /* triangle CSS shape */ shape-outside: polygon(0 0, var(–d) 0, 0 var(–d)); } ul { list-style: none; padding-top: 25px; }
| 12345678910111213141516 | div { width: 0; height: 0; –d: 200px; /* red triangle */ border-right: var(–d) solid transparent; border-bottom: var(–d) solid transparent; border-left: var(–d) solid red; float: left; /* triangle CSS shape */ shape-outside: polygon(0 0, var(–d) 0, 0 var(–d));}ul { list-style: none; padding-top: 25px;} |
Красный треугольник создается с использованием свойств границы. Чтобы создать треугольную CSS фигуру, которая соответствует красному треугольнику, мы используем функцию многоугольника в качестве значения для свойства shape-outside. Значение функции polygon() — это три координаты треугольника, разделенные запятыми. Ссылки автоматически выравниваются вокруг плавающего треугольника, образуя наклонный макет меню по гипотенузе треугольника.
Как видите, даже для простой диагональной компоновки пользовательских элементов управления, CSS-формы неплохо справляются с задачей, добавляя немного изюминки в дизайн. Использование CSS-фигур — гораздо лучший вариант, чем поворот строки пользовательских элементов управления — выравнивание отдельных элементов управления и вращение текста. В отличие от этого CSS-форма просто размещает отдельные элементы управления вдоль границы предоставленной формы.
Автор: Preethi
Источник: webformyself.com