Як розпочати роботу з CSS Shapes
Що таке CSS Shapes?
Специфікація CSS Shapes описує геометричні фігури в CSS. На першому рівні специфікації форми можуть бути застосовані тільки для плаваючих елементів. Найпростіший приклад для початку.
Додаємо клас, написаний у прикладі вище, до зображення. Вирівнюємо зображення по лівому краю, задаємо ширину, висоту та зовнішні відступи, потім використовуємо властивість для того, щоб текст обтікав зображення по колу.
Для того, щоб рухатися далі, зайдіть на сайт http://betravis.github.io// через браузер Chrome та перейдіть до Show Shapes bookmarklet.
Якщо ви потім перейдете на сторінку з нашим прикладом і перетягніть на вкладку з прикладом, побачите, як малюється форма.
Основні форми
Властивість , що використовується у нашому простому прикладі, може набувати різних значень. Першими базовими речами є «основні постаті». Вони мають такі функції: - inset (); - circle (); - ellipse (); - polygon ().
Ця функція дозволяє визначити прямокутник усередині обтічної області, робить це автоматично і цього може бути достатньо. Але можуть бути випадки, коли необхідний додатковий контроль.
Функція inset() може бути задана 4 аргументами, які задають зміщення від країв елемента, крім прямокутних форм, також є властивість «round».
inset(top right bottom left round);
inset(10px 20px 10px 20px round 50%);
Аргументи для inset мають також позначення, що і внутрішній відступ, так що якщо ви хочете вставити 20 пікселів навколо елемента, ви повинні зробити наступне:
inset(10px round 50%);
У нашому прикладі використовується зображення, яке має великий порожній простір під картинкою. Якщо простопозиціонувати картинку, то утворюється великий порожній простір знизу. За допомогою цієї функції можна задати нижню межу фігури, дозволяючи тексту знаходиться ближче до зображення.
.shape
Перегляньте приклад і використовуйте Show Shapes-закладку для того, щоб побачити форму.
Ми використовували цю форму на початку статті. Фігура circle() повністю описана у документації як:
circle(r at cx cy);
Аргумент r - радіус кола, 50% ширини елемента. Інші два значення: X та Y – координати центру кола, що дозволяє Вам переміщувати коло.
У нашому випадку ми використовуємо:
Також я можу написати це так:
circle(50% at 50% 50%);
На сторінці з прикладом у нас є іконка з прозорим фоном і для того, щоб зробити приклад наочнішим, я зробив у картинки сірий фон, внутрішній відступ, кордон і внутрішній відступ:
У картинки позиціонування по лівому краю, якщо ми не застосуємо жодних форм, зображення буде виглядати так, на скріншоті нижче:
Ми можемо створити просту круглу форму:
.circle < : circle(50%); >
Якщо ми використовуємо значення кола в , то це змінить координати. Коло переміститься вгору та вліво.
. < : circle(50% at 30% 30%); >
Ви можете використовувати абсолютні або відносні значення координат або властивостей як позиціонування фонових зображень.
На даний момент варто подивитись види блоків. Є 4 можливі блоки, які ми можемо використовувати: — — — —
Значення за промовчанням для кола — це .
Те саме можна написати так:
Як ви здогадалися, обмежується зовнішнім відступом, межами, внутрішнім відступом і обмежується контентом.
Прочитайте наступну статтю для повного розуміння CSS Shapes.
Якщо подивитися на приклад за допомогою Show Shapes bookmarklet, ви зможете побачити, як це працює.
Останнє, що ми хочемо вам показати з використанням circle, - це як обрізати вміст, щоб контент повторював форму, яку ви задали. Ми додали видимі межі та відступи до елемента нашого видимого тексту, щоб перекрити його. Насправді ми можемо підрізати вміст форми за допомогою властивості .
. < : circle(50%); -: circle(50%); : circle(50%); >
Багато форм можуть бути вигнуті у формі еліпса, навіть якщо вони не є еліпсом.
Еліпс задається так само, як і коло, за винятком того, що замість одного радіусу, необхідно вказати два радіуси - по осях X і Y.
Значення радіусу можуть бути задані абсолютними чи відносними одиницями, також є властивості і . Ці властивості можна використовувати і для кола, але вони будуть менш корисні на практиці. Мій приклад без використання форм із простим позиціонуванням.
Я можу використовувати властивість радіусу:
Яке створює коло цьому елементі, оскільки фактичні розміри зображення квадратні.
Для керування еліпсом ми використовуємо абсолютні одиниці довжини.
. < : ellipse(90px 150px at 50% 50%); >
Для того, щоб змістити еліпс, ми змінюємо координати:
. < : ellipse (at 70% 80%); >
Якщо вам потрібний справді точний контроль при малюванні багатокутної фігури, малювання полігонів допоможе вам у цьому. Ви можете вказати стільки координат, скільки вам потрібно для вашої фігури – як мінімум три. Кожна пара координат розділяється комою.
Використовуючи Show Shapes bookmarklet, можна побачити форму.
Форми із зображення
Ще один спосіб створення форми – задати для зображення значення . Таке зображення має мати. (Ви можете дізнатися, як зберегти зображення за допомогою Photoshop у блозі Adobe Web Platform)
Примітка: зображення, які ви використовуєте, має бути CORS сумісним. Вперше ми не могли зрозуміти, чому наші форми не працювали, коли тестували. Ви можете дізнатись тут більше.
Мій приклад сторінки містить три різні шляхи застосування цієї техніки. У першому прикладі ми маємо картинку на сторінці і ми також передаємо її через Url для створення форми.
Властивість визначає граничне значення непрозорості, яке ми повинні використовувати, 0 - повністю прозоре, 1 - абсолютно непрозоре.
Як ви можете бачити наш текст йде впритул до зображення.
У другому прикладі ми використовуємо інший значок та встановлюю властивість для форми. Це створює відступи навколо вигнутої траєкторії елемента.
Вам не потрібно створювати форму на основі сторінок. В останньому прикладі я створив зображення у фотошопі, яке виглядає так.
Ми збираємося використовувати його і створити форму, щоб направити текст уздовж діагональної лінії.
.content:before < content: ««; float: left; width: 200px; height: 200px; : url('alpha.png'); : 0.5; >
Це означає, що ви можете створити замасковане зображення та використовувати його незалежно від того, що є на вашій сторінці.
Ви також можете встановити значення для властивості , яку ми обговорювали, коли вивчали властивість value().
Це буде корисно,якщо ви застосували до об'єкта властивість і хочете, щоб контент обтікав по кривій навколо кордону. Як у цьому прикладі.
Підтримка браузера
Однією гарною рисою CSS Shapes є те, що вони можуть бути застосовані для вирівнювання, вони можуть легко використовуватися як прогресивне покращення вашого сайту.
Браузери, які не підтримують CSS Shapes відображатимуть вирівнювання, як звичайно: з квадратною рамкою навколо елемента. Браузери, які підтримують цей функціонал, будуть вирівняні так, як ви задали. Це добре простежується на веб-сайті The Web Ahead podcast.
Ви можете побачити, як це виглядає в Google Chrome, на зображенні ліворуч. Firefox (праворуч) ще не підтримує форми і бачимо квадратну рамку навколо зображення.
Користувачі Firefox не знають, що упускають, і відсутність цієї функції не шкодить, але його наявність є приємним доповненням для браузерів.
Ви можете побачити повну та актуальну інформацію про те, чи підтримує ваш браузер цей функціонал на сайті Can I Use. На момент написання статті ситуація була така:
Якщо ви хочете спробувати CSS Shapes у браузерах, які не підтримують цю технологію, Adobe Web Platform створила спеціальний плагін, який доступний на Github.