От автора: в одном из предыдущих уроков мы научились создавать CSS формы, что позволило нам придавать элементам истинную форму. Мы изучили основы: создали круг и пустили небольшой текст с обтеканием. Давайте теперь узнаем, как создавать более сложные формы, что сделает макеты наших страниц еще богаче и нестандартнее.
Создаем многоугольник
Помимо простых форм типа круга и треугольника, можно создавать и многоугольники – фигуры с множеством сторон (обычно 5 и более), такие как пятиугольник и шестиугольник. Нам понадобится CSS функция polygon(), которая принимает несколько значений, разделенных запятой. Значения – это координаты:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.shape { float: left; background-size: contain; background-repeat: no-repeat; margin: 30px; width: 265px; height: 265px; shape-margin: 20px; } .pentagon { background-image: url('../img/pentagon.svg'); shape-outside: polygon(32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px); } |
В коде выше добавлено 5 координат, которые формируют пятиугольник. Если добавить еще одну координату, фигура превратится в шестиугольник, семиугольник, восьмиугольник и т.д.
Создать многоугольник самому намного сложнее, чем создать круг или эллипс, особенно если это сложный многоугольник с множеством координат. К нашему счастью, есть очень удобный инструмент, который делает создание CSS форм более интуитивным.
Работа с CSS Shapes Editor
CSS Shapes Editor — расширение для Chrome. После установки в панели разработчика добавляется новая вкладка Shapes на вкладке Elements, встроенная с другими вкладками (Styles, Computer и т.д.).
На вкладке Shapes расположено свойство shape-outside со знаком +, с помощью которого можно выбрать функцию для создания фигуры. Давайте выберем функцию polygon(), а дальше все как в графическом редакторе, рисуем фигуру.
Пока мы рисуем, расширение обновляет координаты фигуры в функции и сразу же вставляет их в виде инлайновых стилей в элемент. После создания фигуры можно скопировать полученный код в свои стили.
Эта техника позволяет с легкостью рисовать любые фигуры и применять их на странице, например:
Извлечение формы из изображения
Среди других значений свойства shape-outside есть функция url(). Точно такая же функция, которой мы везде пользуемся в CSS для вставки фонового изображения. В нашем случае функция url() позволяет свойству shape-outside задавать фигуру на основе изображения.
Если вы хотите гладко пустить контент вокруг сложной графики с множеством кривых и углов, вместо polygon() необходимо использовать url(). Также данный способ лучше использовать при работе с пользовательским контентом, где сложно определить форму.
Возьмем попугая ара с сайта Unsplash. Сперва нужно создать изображение с прозрачным фоном, например:
Исходное изображение попугая добавляется в контейнер в виде фона:
|
1 2 3 4 |
.container { background-repeat: no-repeat; background-image: url('../img/parrot.png'); } |
Порог прозрачности
Что касается самой формы, мы добавим ее в другой элемент внутри контейнера, и тут мы воспользуемся другим CSS свойством shape-image-threshold.
|
1 2 3 4 5 |
.shape { shape-margin: 15px; shape-outside: url('../img/parrot-shape.png'); shape-image-threshold: 0; } |
Это свойство задает порог минимальной прозрачности, которая задает форму изображения. Свойство принимает значения между 0 и 1. Если у вас слегка прозрачное изображение, можно поставить 0.8 или 0.5. Мы поставили 0, так как область вокруг попугая полностью прозрачна.
Результат должен быть такой:
Фолбек
Поддержка у CSS форм нормальная, однако не ждите чуда от Firefox, IE и Edge. Отвечая на вопрос Стивена из предыдущего урока, у нас есть несколько вариантов.
«Крутой настоящий вопрос: какой фолбек для IE/FF? Для большинства пользователей, похоже, будет создан всеобъемлющий макет формы.» — Стивен Бейтмен
Во-первых, можно использовать Modernizr. Modernizr – надежная JS библиотека для тестирования функций в браузере. При загрузке библиотеки не забудьте поставить галочки на классы CSS Shapes и Add CSS. Если формы не поддерживаются, можно прописать стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/** * Когда браузер не поддерживает "CSS формы". */ .no-shapes .shape { shape-outside: polygon(); } /** * Когда браузер поддерживает "CSS формы". */ .shapes .shape { } |
Если Modernizr для вас перебор, можно добавить следующий JS код. Нужно ведь просто проверить, работает ли свойство в браузере.
|
1 2 3 |
if ('undefined' === typeof document.querySelector('.shape').style.shapteOutside) { document.body.classList.add('no-css-shape'); } |
У каждого CSS свойства есть эквивалент в JS объекте Style, с помощью которого можно динамически добавлять стили через JS. Этот код определяет, поддерживает ли браузер метод shapeOutside. Если нет, добавляется класс no-css-shape, который можно использовать для фолбек стилей.
|
1 2 3 4 5 6 |
.shape { shape-outside: polygon(); } .no-shapes .shape { } |
Ну и наконец, можно использовать синтаксис @support, например.
|
1 2 3 4 5 |
@supports (shape-outside: circle()) { .shape { shape-outside: circle(); } } |
Какой подход больше подходит под ваш проект – решать вам.
Заключение
В этом уроке мы научились работать с функцией polygon(), а также узнали, как можно легко рисовать многоугольники при помощи Chrome расширения. Также узнали, как использовать изображение для создания форм, очень полезно с очень сложными формами. И в конце, несмотря на хорошую поддержку форм в браузерах, мы рассмотрели отличные альтернативы для браузеров без поддержки данного свойства.
Демо
Автор: Louie Rootfield
Источник: //webdesign.tutsplus.com/
Редакция: Команда webformyself.
