Clip-path - CSS-Tricks

Cuprins

clip-pathProprietatea în CSS vă permite să specificați o anumită regiune a unui element de afișare, cu restul fiind ascunse (sau „decupaje“) departe.

.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 */ )

Exista o clipproprietate, dar rețineți că este învechită.

Cel mai frecvent caz de utilizare ar fi o imagine, dar nu se limitează la asta. Puteți aplica clip-pathla fel de ușor o etichetă de paragraf și doar o porțiune din text.

 

 I'll be clipped.

Aceste patru valori din inset()(în CSS de mai sus) reprezintă punctul de sus / stânga și punctul de jos / dreapta , care formează dreptunghiul vizibil. Totul în afara acelui dreptunghi este ascuns.

Această imagine de Louis Lazaris explică patru punctul de vechi clip: rect();sintaxa foarte bine.

Alte valori posibile:

.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%); )

Exemplu de cale de clip SVG:

Este foarte ciudat că clip-pathnu a acceptat path()funcția din poartă, deoarece path()este deja un lucru pentru proprietăți precum motion-path. Cu toate acestea, Firefox are suport pentru acesta și așteptăm restul browserelor. Vedeți o implementare inițială a clip-path: path ();

Fă-ți propriul

Până când putem folosi în mod fiabil path(), cele mai utile clipuri pentru forme personalizate fanteziste sunt polygon(). Iată un editor foarte elegant pentru cei de la Mads Stoumann (care funcționează și pentru cercuri și elipse):

Mai multe informatii

  • Decupare și mascare în CSS
  • clip-path pe WPD
  • clip-path pe MDN
  • Clippy: creatorul de trasee de clip Bennett Feely
  • Decupare și mascare pe MDN
  • Proprietatea (depreciată) Clip CSS (Web-uri impresionante)
  • Specificații despre mascare CSS
  • CSS Masking de Dirk Schulze
  • Decupare în CSS și SVG - Proprietatea și elementul clip-path de Sara Soueidan
  • Pixuri etichetate clip-path pe CodePen
  • Demonstrațiile și browserul acceptă demo Pen de la Yoksel
  • Măști SVG de Jakob Jenkov
  • Cercetările lui Alan Greenblatt privind nivelurile de suport ale browserului pentru funcții de tăiere și mascare

Suport pentru browser

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.

Desktop

Crom Firefox IE Margine Safari
91 54 Nu 88 TP *

Mobil / Tabletă

Android Chrome Android Firefox Android Safari iOS
88 85 81 14.0-14.4 *

Articole interesante...