Як використовувати CSS форми у своєму веб-дизайні

33

Від автора: принципи макетування (стовпці та рядки, кути і рядки), використовувані для створення сайтів сьогодні, багато в чому запозичені у своїх друкованих колег. І хоча реалізація сіток лише вдосконалюється, загальний вигляд веб-макетів пригнічує порівняно з друкованими журналами, особливо в області потоку контента.

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

Давайте дізнаємося, як модуль CSS Shapes дасть нам таку ж свободу в макетуванні в інтернеті.

Швидке введення в CSS форми

CSS форми дозволяють веб-дизайнерам створювати більш абстрактні геометричні макети, що виходять за рамки простих прямокутників і квадратів. Специфікація дає нам нові властивості shape-outside і shape-margin. Підтримка в браузерах нормальна, хоча на даний момент властивості доступні лише в Chrome, Opera і Safari з префіксом –webkit-. Тобто необхідно використовувати -webkit-shape-outside.

Властивість shape-outside змушує инлайновый контент обтікати елемент по кривій, а не за його блокової моделі. Спочатку з’явилося властивість shape-inside, з допомогою якого можна помістити вміст всередину елемента. Текст всередині кола сам приймає форму кола. Однак реалізація цієї властивості була відкладена до CSS Shapes Level 2.

Властивість shape-margin задає зовнішній відступ навколо того елемента, до якого застосовано властивість shape-outside. Розберемо кілька прикладів.

Як створити форму

Простіше всього зрозуміти принцип роботи CSS форм – це створити коло. У нас є div (коло) і кілька параграфів.

Lorem ipsum…

Lorem ipsum…

Lorem ipsum…

Нижче наведено базові стилі, в тому числі ширина і висота кола, border-radius, задає форму кола, і властивість float, щоб параграфи тексту обтікали елемент.

.circle {
width: 250px;
height: 250px;
background-color: #40a977;
border-radius: 50%;
float: left;
}

Як ми і очікували, тепер параграфи будуть обтікати елемент. Але так як border-radius не задає справжню форму елемента, текст обтікає коло не по контуру.

Якщо проінспектувати елемент через панель розробника, ми побачимо, що він все ще є блоком. Навіть якщо div і виглядає, як коло, властивість border-radius ніяк не змінює справжню форму елемента.

Щоб наші параграфи обтікали елемент по контуру кола, нам потрібно змінити реальну форму елемента за допомогою властивості shape-outside. У нашому випадку ми пропишемо властивість і значення передамо функцію circle().

.circle {
width: 250px;
height: 250px;
background-color: #40a977;
border-radius: 50%;
float: left;
-webkit-shape-outside: circle();
shape-outside: circle();
}

Тепер наш текст акуратно обтікає коло по контуру.

Крім того, якщо тепер заглянути в панель розробника, ми побачимо, що елемент малюється у вигляді кола.

Подивіться, наскільки макет буде виглядати краще, якщо додати пару зовнішніх відступів:

Налаштовуємо коло

Функція circle() приймає кілька значень радіуса та центру координат: circle(r at x y). За замовчуванням радіус обчислюється з розмірів елемента. Якщо елемент має ширину 300px, приміром, радіус буде 150px (радіус – половина діаметра кола).

Точно так само і координати x і y обчислюються з розміру елемента. За замовчуванням координати задані в 50% 50%, тобто центр елемента.

Ці дві координати стануть в нагоді у випадках, коли вам потрібно змінити розмір форми, зберігши реальний розмір елемента, або коли вам потрібно пересунути форму, зберігши позицію елемента. У прикладі нижче ми зменшуємо радіус кола до 60px, а центр координат зміщуємо в точку 30% 70%. Це зрушить коло в нижній лівий кут блоку елемента.

Варто зазначити, що при зміні кола необхідно явно задавати обидва значення: центру координат і радіусом. Використовувати щось одне – неправильно.

circle( 60px at 30% 70% ) // правильно.
circle( 60px ) // invalid.
circle( at 30% 70% ) // неправильно.

Блокова модель форми

CSS форми успадковують ті ж самі принципи блокової моделі, які притаманні елементу, тільки вони застосовуються за межами самого елемента. Це дозволяє нам окремо вказувати, наприклад, border-box для елемента і padding-box для форми. Щоб змінити блоковую модель форми, необхідно після функції використовувати одне з ключових слів: content-box, margin-box, border-box або padding-box.

.circle {
width: 250px;
height: 250px;
background-color: #40a977;
border-radius: 50%;
float: left;
padding: 10px;
border: 20px solid #ccc;
margin: 30px;
-webkit-shape-outside: circle() padding-box;
shape-outside: circle() padding-box;
}

За замовчуванням блокова модель форми визначається в margin-box. У прикладі нижче ми змінили модель на padding-box, щоб браузер виключив з розрахунків розміру форми margin. Тепер текст повинен проходити крізь рамку і стосуватися padding’а елемента.

Створюємо ще більше форм

В специфікації CSS форм представлено ще декілька функцій для створення форм:

ellipse(): з назви випливає, що функція буде створювати еліпс. Ми можемо налаштувати радіус еліпса і переміщати координати центру. На відміну від circle(), функція ellipse() приймає два радіуса: горизонтальний і вертикальний. ellipse( 100px 180px at 10% 20% ).

polygon(): ця функція дозволяє створювати більш складні форми, як трикутники, шестикутники, а також негеометрические форми. Працювати з цією функцією не так просто, як створити коло, однак вам може допомогти сервіс Path to Polygon Converter.

Висновок

У цьому уроці ми дізналися про базову застосування CSS форм. Ми створили форму, налаштували її розмір, розташування і блоковую модель. На момент написання статті в CSS форм є грубі недоробки. Може бути, саме через них ми ще не спостерігаємо широкої підтримки в браузерах.

Як було сказано вище, властивість shape-inside, за допомогою якого можна розміщувати контент всередину елемента, було заморожено.

В специфікації CSS форм представлено окрему властивість shape-box, з допомогою якого можна вказувати блоковую модель форми. На даний момент воно не працює ні в одному браузері.

В Safari потрібно префікс –webkit, властивість є експериментальним.

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