Clip-path - CSS-Tricks

Spisie treści

clip-pathNieruchomość w CSS pozwala określić obszar konkretnego elementu na ekranie, a reszta jest ukryta (lub „obcięte”) z dala.

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

Kiedyś istniała clipwłaściwość, ale pamiętaj, że jest ona przestarzała.

Najczęstszym przypadkiem użycia byłby obraz, ale nie jest to ograniczone do tego. Równie łatwo można zastosować clip-pathznacznik akapitu i tylko część tekstu.

 

 I'll be clipped.

Te cztery wartości w inset()(w powyższym CSS) reprezentują górny / lewy punkt i dolny / prawy punkt, który tworzy widoczny prostokąt. Wszystko poza tym prostokątem jest ukryte.

Ten obraz autorstwa Louisa Lazarisa bardzo dobrze wyjaśnia cztery punkty starej clip: rect();składni .

Inne możliwe wartości:

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

Przykładowa ścieżka klipu SVG:

To bardzo dziwne, że clip-pathnie obsługuje path()funkcji poza bramą, ponieważ path()jest to już kwestia właściwości takich jak motion-path. Firefox obsługuje go teraz i czekamy na pozostałe przeglądarki. Zobacz wstępną implementację clip-path: path ();

Zrobić własny

Dopóki nie możemy niezawodnie używać path(), najbardziej przydatnymi klipsami do fantazyjnych niestandardowych kształtów są polygon(). Oto naprawdę zgrabny edytor dla tych od Madsa Stoumanna (który działa również dla okręgów i elips):

Więcej informacji

  • Obcinanie i maskowanie w CSS
  • clip-path na WPD
  • clip-path na MDN
  • Clippy: kreator ścieżek klipów Bennetta Feely'ego
  • Przycinanie i maskowanie na MDN
  • (Przestarzała) Właściwość klipu CSS (Impressive Webs)
  • Specyfikacja maskowania CSS
  • Maskowanie CSS autorstwa Dirka Schulze
  • Przycinanie w CSS i SVG - właściwość i element clip-path autorstwa Sary Soueidan
  • Długopisy otagowane clip-path w CodePen
  • Dema i obsługa przeglądarek demo Pen by Yoksel
  • Maski SVG autorstwa Jakoba Jenkowa
  • Badania Alana Greenblatta na temat poziomów obsługi przeglądarek dla funkcji obcinania i maskowania

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.

Pulpit

Chrom Firefox TO ZNACZY Brzeg Safari
91 54 Nie 88 TP *

Telefon komórkowy / tablet

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

Interesujące artykuły...