Кліп-шлях - CSS-хитрощі

Зміст

clip-pathВластивість в CSS дозволяє вказати конкретний регіон елемента для відображення, причому інше приховано (або «підрізані») геть.

.clip-me ( /* Example: clip away the element from the top, right, bottom, and left edges */ clip-path: inset(10px 20px 30px 40px); /* or "none" */ /* Example: clip element into a Heptagon */ clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%); /* Deprecated version */ position: absolute; /* absolute or fixed positioning required */ clip: rect(110px, 160px, 170px, 60px); /* or "auto" */ /* values descript a top/left point and bottom/right point */ )

Раніше була clipвластивість, але зверніть увагу, що вона застаріла.

Найпоширенішим варіантом використання буде зображення, але це не обмежується цим. Ви можете так само легко застосувати clip-pathтег абзацу та лише частину тексту.

 

 I'll be clipped.

Ці чотири значення в inset()(у CSS вище) представляють верхню / ліву точку та нижню / праву точки, що утворює видимий прямокутник. Все поза цим прямокутником приховано.

Це зображення Луї Лазаріса дуже добре пояснює чотири пункти старого clip: rect();синтаксису .

Інші можливі значення:

.clip-me ( /* referencing path from an inline SVG */ clip-path: url(#c1); /* referencing path from external SVG */ clip-path: url(path.svg#c1); /* polygon */ clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); /* circle */ clip-path: circle(30px at 35px 35px); /* ellipse */ clip-path: ellipse(65px 30px at 125px 40px); /* inset-rectangle() may replace inset() ? */ /* rectangle() coming in SVG 2 */ /* rounded corners… not sure if a thing anymore */ clip-path: inset(10% 10% 10% 10% round 20%, 20%); )

Приклад шляху до кліпу SVG:

Дуже дивно, що clip-pathця path()функція не підтримувала вихід із воріт, оскільки path()це вже властиво таким властивостям, як motion-path. Firefox зараз має підтримку, і ми чекаємо на решту браузерів. Див. Початкове впровадження clip-path: path ();

Зробіть свій власний

Поки ми не можемо надійно використовувати path(), найкориснішими затискачами для вигадливих нестандартних форм є polygon(). Ось справді акуратний редактор для тих, хто від Мадса Стоумана (який також працює для кіл та еліпсів):

Більше інформації

  • Відсікання та маскування в CSS
  • кліп-шлях на WPD
  • кліп-шлях на MDN
  • Кліппі: виробник кліп-шляху Беннета Філі
  • Відсікання та маскування на MDN
  • Властивість кліпу CSS (застаріле) (вражаючі веб-сайти)
  • Специфікація CSS Masking
  • Маскування CSS Дірка Шульце
  • Відсікання в CSS та SVG - Властивість та елемент кліпу шляху Сари Суейдан
  • Ручки з міткою кліп-шлях на CodePen
  • Демонстраційні програми та підтримка браузера демонстраційна версія Pen від Yoksel
  • SVG Маски Якоба Єнькова
  • Дослідження Алана Грінблатта щодо рівнів підтримки браузера для відсікання та маскування функцій

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome Firefox IE Край Сафарі
91 54 Ні 88 TP *

Мобільний / планшетний

Android Chrome Android Firefox Android iOS Safari
88 85 81 14,0-14,4 *

Цікаві статті...