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

31

Від автора: в одному з попередніх уроків ми навчилися створювати 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 форм більш інтуїтивним.

Робота з CSS Editor Shapes

CSS Shapes Editor — розширення для Chrome. Після встановлення в панелі розробника додається нова вкладка Shapes на вкладці Elements, вбудована з іншими вкладками (Styles, Комп’ютер тощо).

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

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

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

Поки ми малюємо, розширення оновлює координати фігури в функції і відразу ж вставляє їх у вигляді инлайновых стилів елемент. Після створення фігури можна скопіювати отриманий код в свої стилі.

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

Ця техніка дозволяє з легкістю малювати будь-які фігури і застосовувати їх на сторінці, наприклад:

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

Витяг форми з зображення

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

Якщо ви хочете гладко пустити контент навколо складної графіки з безліччю кривих і кутів, замість polygon() необхідно використовувати url(). Також цей спосіб найкраще використовувати при роботі з призначеним для користувача контентом, де складно визначити форму.

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

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

Початкове зображення папуги додається в контейнер у вигляді фону:

.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 розширення. Також дізналися, як використовувати зображення для створення форм, дуже корисно з дуже складними формами. І в кінці, незважаючи на хорошу підтримку форм в браузерах, ми розглянули відмінні альтернативи для браузерів без підтримки цієї властивості.

Демо

Polygons

Image mask #1

Image mask #2