Новости
- Підтримка браузерами CSS Shapes
- Властивість shape-outside
- Функція polygon ()
- Зробити фігуру за координатами вершин не просто!
- Які форми можливі
- inset ()
- circle ()
- Параметри радіусу кола
- Змістити центр кола
- ellipse ()
- Міняємо розміри еліпса
- Змістити центр еліпса
- Фігури з зображення
- фігурні кордону
- Властивості shape-margin
- висновок
Можливості HTML5 та CSS3 не перестають нас радувати новими корисними специфікаціями. У цій статті ми розглянемо можливості з купою маленьких демо, щоб допомогти вам зрозуміти як це працює.
Зазвичай текст на сторінці обтікає елементи строго дотримуючись кордону. Мета синтаксису CSS Shapes розмістити текст навколо краю елемента в більш довільній формі. Специфікація CSS Shapes багато в чому нагадує CSS masking , Застосовується для відсікання фрагментів форми.
Підтримка браузерами CSS Shapes
В даний час специфікацією CSS Shapes працює в наступних браузерах:
- Хром 34+ з особливим пунктом (див. Нижче)
- Chrome Canary
- WebKit Nightly
Для того, щоб побачити приклади на цій сторінці і по експериментувати з специфікацією CSS Shapes, необхідно переконатися, що ви використовуєте потрібний браузер.
Якщо Ви використовуєте Chrome (НЕ Chrome Canary), вставте в адресний рядок посилання:
chrome: // flags / # enable-experimental-web-platform-features
Потім в пункті Включити експериментальні функції веб-платформи натисніть кнопку Увімкнути. Щоб браузер почав розуміти нову специфікацію CSS його потрібно перезапустити, для цього внизу браузера під пропозицією Внесені зміни стануть активні після перезапуску Google Chrome натисніть кнопку Запустити знову.
Властивість shape-outside
Перше що ми розглянемо - це властивість shape-outside. Застосовується для визначення форми обтікання навколо кордону зображення у вигляді прямокутника, кола, багатокутника або еліпса. Властивість shape-outside відсікає фрагменти над ділянкою (області) для заповнення їх текстом.
Перший і дуже простий приклад виглядає так:
Простий приклад розміщення тексту
Якщо додати властивість CSS shape-outside до зображення:
img {float: left; shape-outside: inset (1% round 45%); }
Для цього прикладу використовується блок із зображенням яблука. Зображення розміром 250px на 250px, тобто квадрат, без кордону навколо області зображення. Зображенню додано властивість shape-outside: inset (1% round 45%), тому текст обтікає зображення з правого боку не дотримуючись кордону.
Рядки тексту будуть триває внизу під зображенням.
В результаті область зображення стає закругленою, це додає особливий веб-дизайн для вмісту сайту.
Ви напевно помітили що яблуко на зображенні не ціла (від кусають), чому, можливо знає Джобс. Але, а наше завдання зробити обтікання тексту довільної форми. Для того щоб (від кусання) місце яблука на зображенні заповнилося текстом, ми використовуємо властивість shape-outside з функцією polygon ().
Функція polygon ()
Функція polygon () має значення координат з яких можна створити будь-яку фігуру, що дозволить зробити обтікання тексту навіть в самі незвичайні форми!
Координати можуть бути в пікселях або у відсотках:
shape-outside: polygon (x1 y1, x2 y2, x3 y3, x4 y4, x5 y5);
Для цього прикладу використовується блок із зображенням яблука. Зображення розміром 250px на 250px, тобто квадрат, без кордону навколо області зображення. Зображенню додано властивість shape-outside: polygon (), тому текст обтікає зображення з правого боку не дотримуючись кордону.
Рядки тексту будуть триває внизу під зображенням.
Зробити фігуру за координатами вершин не просто!
Згоден. Коли справа доходить до не рівно зображень, зробити довільну форму складно, особливо при використанні відсотків. Для цього є інструмент який допомагає побудувати будь-яку фігуру.
Інструмент CSS Shapes для побудови форми
Якщо вам не потрібні складні форми, є простий онлайн-інструмент який допоможе створити форму багатокутника.
Які форми можливі
Властивість shape-outside дозволяє використовувати кілька різних функцій для визначення форми:
inset ()
Функція inset () дозволяє визначити прямокутник всередині обтічної області. Це корисно, якщо потрібно що б на прямокутному зображення знаходився текст. Наприклад там де багато вільного місця або на зображенні спочатку продумана розмітка для тексту.
Розмістити текст в верхню, праву, нижню і ліву позицію прямокутника, так само просто, як визначити відступи:
shape-outside: inset (10px, 5px, 10px, 5px);
Функцією inset () можна замінити відступи margin / padding.
Прямокутник з відступом в 1% від кордонів елемента:
shape-outside: inset (1%);
А ще прямокутника можна додати стилі border-radius, щоб закруглити кути.
Якщо додати в "round" а потім вказати розмір за допомогою звичайного синтаксису border-radius, вищезгаданий бокс буде із закругленими кутами. Дивіться приклад з round вище.
Код, наведений нижче, робить зображення із закругленими кутами з урахуванням відступу від краю нашого зображення на 1%:
shape-outside: inset (1% round 10px);
У прикладі радіус закруглюється до 45%:
shape-outside: inset (1% round 45%);
Закруглити для кожного кута можна по різному. У наступному прикладі коду, верхній лівий кут закруглений на 5px, верхній праворуч 10px, справа внизу 5px, і внизу зліва 5px:
shape-outside: inset (1% round 5px 10px 5px 5px);
Але це не все, кодом нижче можна зробити фігуру тестом:
shape-inside: polygon (0px, 150px);
circle ()
Якщо видиме зображення кругле, можна зробити обтікання тексту по колу додавши функцію circle () ось так:
shape-outside: circle ();
Ось як це працює:
Для цього прикладу використовується знімок планети Марс. Знімок планети Марс з розмірами 250px на 250px, тобто квадрат. Знімку планети Марс додано властивість shape-outside: circle (). В результаті текст обтікає знімок з лівого боку дотримуючись просту форму кола. Якщо функція circle () не містить значення, розміри зображення можуть бути різні. Для правильного обтікання тексту видима область зображення повинна бути круглої.
Параметри радіусу кола
Радіус кола Ви можете вказати в перший аргумент функції circle ().
За замовчуванням, радіус кола - це 50% від ширини зображення:
shape-outside: circle (50%);
Щоб була половина ширини обтічної області потрібно вказати радіус 25%:
shape-outside: circle (25%);
Для визначення радіусу кола є два більш нові властивості: closest-side і farthest-side вони визначають, яким чином браузері мають робити радіус кола, використовуючи кордону самого елемента. Значення не має сенсу якщо зображення квадрат, але для прямокутного елемента значення сенс мати буде.
Значення closest-side обчислює радіус кола від краю елемента ближче до центру. За своєю суттю circle () еквівалентний circle (closest-side).
Для прямокутного елемента використовуємо наступні:
shape-outside: circle (closest-side);
Аргумент closest-side функції circle () робить коло щільно прилеглим до центру зображення.
Аргумент farthest-side навпаки обчислює радіус кола подалі від центру. Якщо ми маємо прямокутний елемент з відрізаними верхом і низом кола, потрібно використовувати для функції circle () значення farthest-side:
shape-outside: circle (farthest-side);
Для цього прикладу використовується знімок планети з розмірами 250px на 167px, де вирізаний верх і низ знімка. Зображення обведено кордоном червоного кольору в 1px. Оскільки знімок планети має форму прямокутника було додано значення farthest-side. В результаті текст обтікає знімок з лівого боку ... Радіус кола віддалений від центру видимої частини знімка.
Змістити центр кола
Щоб змістити центр кола досить написати ключове слово в який бік потрібно зміщувати центр кола. Це для тих випадків, коли коло не точно по центру зображення, або зробити півколо від краю до краю. Наприклад, якщо зображення високе:
shape-outside: circle (farthest-side at left);
Ми можемо зробити півколо, центр якого знаходиться в лівій частині зображення висота якого збігається з висотою елемента:
Для цього прикладу використовується частина знімка планети. Повний розмір зображення становить 192px на 400px, де висота фото більше в два рази, ніж ширина. Для зображення додано значення farthest-side at left, це значення зміщує центр окружності в ліву сторону. В результаті зсуву центру кола, текст обтікає знімок з правого боку повторюючи контур кола. У цьому прикладі висота тексту співпадає з висотою зображення.
Можна багато використовувати різних значень для зміни положення центру кола. Теоретично, все що відноситься до повинно працювати, наприклад:
shape-outside: circle (closest-side at center); shape-outside: circle (closest-side at 10% 10%); shape-outside: circle (closest-side at center);
Вказавши радіус кола можна домогтися потрібного положення центру кола. Для експерименту створіть півколо в половину менше шириною, центр якого знаходиться з лівого краю (0) і 25% зверху:
shape-outside: circle (25% at 0 25%);
ellipse ()
Якщо потрібно зробити форму овалу, а не кола, краще використовувати функцію ellipse (). Що б застосовувати цю функцію, висота і ширина зображення повинна мати еліпс. Значення для радіуса по осі X і осі Y допоможуть Вам визначили радіус.
Функція ellipse () без значень:
shape-outside: ellipse ();
В результаті отримуємо:
Для цього прикладу використовується малюнок моста в відомому місті у всьому світі, Рим. Колись давно римляни завойовники світ, велике місто Рим був столицею римської імперії. Малюнок моста в Римі з розмірами 193px на 283px (еліпс). Для зображення додана функція shape-outside: ellipse (). В результаті текст обтікає знімок з лівого боку повторюючи форму еліпса.
Міняємо розміри еліпса
Ми можемо зробити форму еліпса різного розміру, так само як і визначення радіусу кола, є всього два значення: для ширини і висоти:
shape-outside: ellipse (25% 10%);
Ще можна визначити ширину і висоту двома значеннями closest-side і farthest-side, так само як ми це робили з circle, використовуємо два значення: одне для ширини і одне для висоти:
shape-outside: ellipse (closest-side closest-side);
Змістити центр еліпса
Методи для зміщення центру еліпса і зміщення центру кола однакові:
shape-outside: ellipse (25% 10% at 0 25%);
Фігури з зображення
Ще одна чудова особливість синтаксису CSS Shapes полягає в використанні Альфа-каналу (прозорість). Якщо у Вас є зображення у форматі PNG або GIF, ви можете визначити обтічну область. Це просто зробити за допомогою двох рядків:
shape-outside: url (img.png); shape-image-threshold: 0,0;
URL як зображення background-image що створює додатковий запит HTTP!
Властивість shape-image-threshold визначає рівень непрозорості, значення такі ж як у властивості CSS opacity; значення 0.0 повністю прозоро, 1.0 - повністю непрозорий.
У прикладі, частина зображення прозора тому значення 0.0:
Властивість shape-image-threshold для зображення
Приклад коду вище:
цьому прикладі використовується частково прозорий малюнок. Малюнок знаходиться на віддаленому сервері що б уникнути помилки Cross-Origin Resource Sharing в браузері. Малюнку присвоєно властивість shape-image-threshold і значення прозорості 0.0. В результаті текст обтікає малюнок з правого боку заповнюючи абсолютна прозорість малюнка.
упевніться, що це на віддаленому веб-сервері, щоб уникнути будь-якої плутанини над тим, чому це не працює!
фігурні кордону
Ще один спосіб визначити обтічну область це вказати кордону для блоку. Також можна закруглити кути кордонів для визначення обтічної області.
Картинка нижче показує різні моделі кордонів в CSS:
Моделі кордонів блоку
- Синя межа - margin-box. Це відступ від елемента зовні меж блоку.
- Чорна межа - border-box. У приклад вище, ми отримаємо кордон навколо блоку 2px.
- Помаранчева зона - padding-box. Це межа, яка знаходиться в самому блоці.
- Саме зображення знаходиться в content-box.
Ви можете використовувати ці кордони для обтічної області ось так:
shape-outside: margin-box; shape-outside: border-box; shape-outside: padding-box; shape-outside: content-box;
Це залежить від того, де і коли буде переноситися рядок тексту. Якщо визначити shape-outside як margin-box, то текст буде обтікати з зовнішнього краю кордону. Якщо визначити як border-box він буде ближче до краю кордону, і так далі ...
Один з простих прикладів використовувати це, потрібно визначити обтічну область закругляя кути (як ми це робили з inset але трохи простіше в реалізації і супроводу). Цей код CSS додасть відступ 5px між зображенням і текстом, обтікання тексту буде навколо зображення у якого радіус 150px:
border-radius: 150px; margin: 5px; shape-outside: margin-box;
Результат виглядає наступним чином:
У цьому прикладі використовується випадковий малюнок. Малюнку присвоєно властивість shape-outside: margin-box і border-radius для заокруглення кутів. В результаті текст обтікає малюнок з правого боку заповнюючи зовнішньою область малюнка. Таке розташування тексту додасть унікальний дизайн.
Той же ефект буде з border-box, padding-box і content-box - змінюється тільки розташування тексту.
Властивості shape-margin
Є можливість додати місце навколо певних ділянок обтічної фігури, щоб текст не потрапляв на зображення. Це зручно в тих випадках, коли не використовується значення для фігури.
У специфікації говориться, що можна використовувати значення довжини (наприклад px, em, rem і ін.), Відсотки, або значення функції calc (). В даний час тільки Chrome Canary підтримує відсотки, а Chrome підтримує довжину і значення функції calc () крім відсотків.
Кілька прикладів:
shape-margin: 10px; shape-margin: 1em; shape-margin: 5%; shape-margin: calc (2em - 1px);
висновок
Скоро в інтернеті будуть обговорювати всілякі форми. Дизайнери і розробники будуть радіти що, нарешті, вони можуть робити такі речі.
Якщо хочете дізнатися більше про специфікації CSS-shapes, дивіться наступні посилання:
- з різними демо