Выводим CSS формы на новый уровень

Выводим CSS формы на новый уровень

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

Создаем многоугольник

Помимо простых форм типа круга и треугольника, можно создавать и многоугольники – фигуры с множеством сторон (обычно 5 и более), такие как пятиугольник и шестиугольник. Нам понадобится CSS функция polygon(), которая принимает несколько значений, разделенных запятой. Значения – это координаты:

.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 форм более интуитивным.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Работа с CSS Shapes Editor

CSS Shapes Editor — расширение для Chrome. После установки в панели разработчика добавляется новая вкладка Shapes на вкладке Elements, встроенная с другими вкладками (Styles, Computer и т.д.).

Выводим CSS формы на новый уровень

На вкладке Shapes расположено свойство shape-outside со знаком +, с помощью которого можно выбрать функцию для создания фигуры. Давайте выберем функцию polygon(), а дальше все как в графическом редакторе, рисуем фигуру.

Выводим CSS формы на новый уровень

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

Выводим CSS формы на новый уровень

Эта техника позволяет с легкостью рисовать любые фигуры и применять их на странице, например:

Выводим CSS формы на новый уровень

Извлечение формы из изображения

Среди других значений свойства shape-outside есть функция url(). Точно такая же функция, которой мы везде пользуемся в CSS для вставки фонового изображения. В нашем случае функция url() позволяет свойству shape-outside задавать фигуру на основе изображения.

Если вы хотите гладко пустить контент вокруг сложной графики с множеством кривых и углов, вместо polygon() необходимо использовать url(). Также данный способ лучше использовать при работе с пользовательским контентом, где сложно определить форму.

Возьмем попугая ара с сайта Unsplash. Сперва нужно создать изображение с прозрачным фоном, например:

Выводим CSS формы на новый уровень

Исходное изображение попугая добавляется в контейнер в виде фона:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
.container {
 background-repeat: no-repeat;
 background-image: url('../img/parrot.png');
}

Порог прозрачности

Что касается самой формы, мы добавим ее в другой элемент внутри контейнера, и тут мы воспользуемся другим CSS свойством shape-image-threshold.

.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. Если формы не поддерживаются, можно прописать стили:

/**
 * Когда браузер не поддерживает "CSS формы".
 */
.no-shapes .shape {
 shape-outside: polygon();
}
 
/**
 * Когда браузер поддерживает "CSS формы".
 */
.shapes .shape {
 
}

Если Modernizr для вас перебор, можно добавить следующий JS код. Нужно ведь просто проверить, работает ли свойство в браузере.

if ('undefined' === typeof document.querySelector('.shape').style.shapteOutside) {
 document.body.classList.add('no-css-shape');
}

У каждого CSS свойства есть эквивалент в JS объекте Style, с помощью которого можно динамически добавлять стили через JS. Этот код определяет, поддерживает ли браузер метод shapeOutside. Если нет, добавляется класс no-css-shape, который можно использовать для фолбек стилей.

.shape {
 shape-outside: polygon();
}
.no-shapes .shape {
 
}

Ну и наконец, можно использовать синтаксис @support, например.

@supports (shape-outside: circle()) {
 .shape {
 shape-outside: circle();
 }
}

Какой подход больше подходит под ваш проект – решать вам.

Заключение

В этом уроке мы научились работать с функцией polygon(), а также узнали, как можно легко рисовать многоугольники при помощи Chrome расширения. Также узнали, как использовать изображение для создания форм, очень полезно с очень сложными формами. И в конце, несмотря на хорошую поддержку форм в браузерах, мы рассмотрели отличные альтернативы для браузеров без поддержки данного свойства.

Демо

Автор: Louie Rootfield

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree