33: Decupare și mascare - CSS-Tricks

Anonim

Conceptul de tăiere și mascare este destul de simplu. Ascundeți anumite părți ale elementelor și arătați altele. Diferența reală dintre ele este destul de simplă. Decuparea este întotdeauna o cale vectorială, în interiorul căii fiind vizibilă și în afara căii nu. În cazul în care o mască este o imagine, este tratată ca o imagine în tonuri de gri în care părțile negre maschează imaginea la transparență și părțile albe lasă imaginea să treacă.

Implementarea decupării și mascării nu este însă foarte ușoară, deoarece suportul browserului pentru acesta (și toate micile intrări și ieșiri) variază destul de mult. Încercăm să parcurgem toate acestea în acest film, lupte și tot.

Sintaxa pentru toate posibilitățile este:

.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 */ /* Masking */ /* mask-image, mask-position, mask-repeat, mask-clip, mask-size… */ mask: url(mask.svg); mask-type: luminance || alpha; -webkit-mask-box-image: url(stampTiles.svg) 30 repeat; mask-border: url(stampTiles.svg) 30 repeat; )

Unele dintre lucrurile demo cu care am jucat în acest videoclip sunt aici și aici.

Iată o grămadă de resurse:

  • clip-path aici pe CSS-Tricks Almanac
  • Decupare și mascare în CSS
  • clip-path pe WPD
  • clip-path pe MDN
  • 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