Lõiketee - CSS-trikid

Lang L: none (table-of-contents)

clip-pathVara CSS võimaldab määrata konkreetse piirkonna elemendi ekraan, kusjuures ülejäänut peidetud (või "kärbitud") kaugusel.

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

Varem oli clipatribuut, kuid pange tähele, et see on aegunud.

Kõige tavalisem kasutusjuht oleks pilt, kuid see ei piirdu sellega. Sama hõlpsalt võiksite rakendada clip-pathka lõikemärgendit ja ainult osa tekstist.

 

 I'll be clipped.

Need neli väärtust inset()(ülaltoodud CSS-is) tähistavad ülemist / vasakut ja alumist / paremat punkti, mis moodustavad nähtava ristküliku. Kõik väljaspool seda ristkülikut on peidetud.

See Louis Lazarise pilt selgitab väga hästi vana clip: rect();süntaksi nelja punkti .

Muud võimalikud väärtused:

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

Näide SVG klipi rajast:

See on väga imelik, et clip-pathsee ei toetanud path()väravast väljuvat funktsiooni, kuna see path()on juba selliste omaduste asi motion-path. Firefoxil on selle jaoks praegu siiski tugi ja me ootame ülejäänud brausereid. Vaadake jaotist Clip-path: path () esmane rakendamine;

Tee endale

Kuni me ei saa seda usaldusväärselt kasutada path(), on väljamõeldud kohandatud kujundite jaoks kõige kasulikum klipp polygon(). Siin on tõesti korralik redaktor neile, kes on pärit Mads Stoumanni juurest (mis sobib ka ringide ja ellipside jaoks):

Rohkem informatsiooni

  • Lõikamine ja maskeerimine CSS-is
  • clip-path WPD-s
  • lõiketee MDN-is
  • Clippy: Bennett Feely klippide tegija
  • Lõikamine ja maskeerimine MDN-il
  • (Vananenud) CSS-i klipi atribuut (muljetavaldavad veebisaidid)
  • CSS-i maskeerimise spetsifikatsioon
  • Dirk Schulze CSS-i maskeerimine
  • CSS-i ja SVG-i lõikamine - Sara Soueidani klippitee Property ja Element
  • Pliiatsid, millel on koodiribal sildistatud klipi tee
  • Demod ja brauserid toetavad Yokseli pliiatsi Pen Pen
  • Jakob Jenkovi SVG maskid
  • Alan Greenblatti uurimine klõpsamise ja maskeerimise funktsioonide brauseri tugitasemete kohta

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

Töölaud

Chrome Firefox IE Edge Safari
91 54 Ei 88 TP *

Mobiil / tahvelarvuti

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

Huvitavad Artiklid...