Stosowanie przycinania w CSS może pomóc nam zrezygnować z wszystkiego, co w naszym projekcie będzie wyglądało jak pudełko. Za pomocą różnych podstawowych kształtów (SVG) możesz utworzyć ścieżkę klipu. Następnie wytnij elementy, których nie chcesz wyświetlać.
Wszystkie elementy na stronach internetowych są zdefiniowane w prostokątnym polu.
Nie oznacza to jednak, że musimy wszystko robić jak pudełko.
Za pomocą właściwości CSS clip-path możesz odcinać fragmenty obrazu lub inne elementy i w ten sposób uzyskać interesujące efekty.
W powyższym przykładzie obraz dymku jest kwadratowy (źródło).
Przy użyciu clip-path i podstawowej wartości kształtu circle() dodatkowe niebo wokół balonu jest odcinane, co powoduje, że na stronie powstaje okrągły obraz.
Obraz jest linkiem, więc możesz zobaczyć coś jeszcze o właściwości clip-path.
Można kliknąć tylko widoczny obszar obrazu, ponieważ zdarzenia nie są uruchamiane w przypadku ukrytych części obrazu.
Przycinanie można zastosować do dowolnego elementu HTML, nie tylko do obrazów.
clip-path można utworzyć na kilka sposobów. W tym poście omówimy je.
Zgodność z przeglądarką
W przypadku starszych przeglądarek zastępczą opcją może być zignorowanie właściwości clip-path przez przeglądarkę i wyświetlenie nieprzyciętego obrazu.
Jeśli jest to problem, możesz przetestować clip-path w zapytaniu o funkcję i zaoferować alternatywny układ dla przeglądarek, które nie obsługują.
@supports(clip-path: circle(45%)) {
/* code that requires clip-path here. */
}
Podstawowe kształty
Właściwość clip-path może przyjmować pewną liczbę wartości.
W pierwszym przykładzie użyto wartości circle().
Jest to jedna z podstawowych wartości kształtu zdefiniowanych w specyfikacji Kształty CSS.
Oznacza to, że możesz przyciąć obszar, a także użyć tej samej wartości dla atrybutu shape-outside, aby spowodować zawijanie tekstu wokół kształtu.
Pełna lista podstawowych kształtów:
inset()
Wartość inset() odsuwa przycięty obszar od krawędzi elementu i może być przekazywana dla krawędzi górnej, prawej, dolnej i lewej.
Za pomocą słowa kluczowego round można też dodać element border-radius do krzywej narożników przyciętego obszaru.
W moim przykładzie mam 2 pudełka z klasą .box.
Pierwsze pole nie ma przycinania, a drugie jest przycinane z użyciem wartości inset().
circle()
Jak widać, wartość circle() tworzy okrągły, przycięty obszar.
Pierwsza wartość jest długością lub procentem i jest promieniem okręgu.
Druga opcjonalna wartość umożliwia ustawienie środka okręgu.
W przykładzie poniżej za pomocą wartości słów kluczowych ustawiam obcięty okrąg w prawym górnym rogu.
Możesz też użyć długości lub wartości procentowej.
Uważaj na płaskie krawędzie!
Pamiętaj przy tym, że kształt zostanie przycięty przez pole marginesu na elemencie. Jeśli utworzysz na obrazie okrąg, który wychodzi poza jego naturalny rozmiar, otrzymasz płaską krawędź.
circle(50%). Obraz nie jest kwadratowy, więc trafiamy na pole marginesów na górze i na dole, więc okrąg zostaje przycięty.ellipse()
Elipsa jest zasadniczo ściśniętym okręgiem. Działa bardzo podobnie do funkcji circle(), ale w przypadku osi x – promień wokół osi x, a w przypadku y – także jako środek elipsy.
polygon()
Wartość polygon() pomaga tworzyć dość złożone kształty, określając maksymalną liczbę punktów przez określenie współrzędnych każdego punktu.
Aby ułatwić sobie tworzenie wielokątów i przeanalizować ich możliwości, zajrzyj do generatora clip-path i skopiuj Clippy, a potem skopiuj kod i wklej go do swojego projektu.
Kształty z wartości pól
W kształtach CSS występują też kształty z wartości pól.
Są one związane z modelem pola CSS – polem treści, polem dopełnienia, polem obramowania i marginesem z wartościami słów kluczowych: content-box, border-box, padding-box i margin-box.
Wartości te mogą być używane niezależnie lub obok podstawowego kształtu do zdefiniowania pola odniesienia używanego przez kształt. Na przykład poniższy kod spowoduje przycięcie kształtu do krawędzi treści.
.box {
clip-path: content-box;
}
W tym przykładzie okrąg użyje pola content-box jako pola odniesienia, a nie pola margin-box (domyślnego).
.box {
clip-path: circle(45%) content-box;
}
Obecnie przeglądarki nie obsługują wartości pól w właściwości clip-path.
Są one jednak obsługiwane w przypadku shape-outside.
Korzystanie z elementu SVG
Aby mieć większą kontrolę nad zaznaczonym obszarem niż jest to możliwe w przypadku podstawowych kształtów, użyj elementu SVG clipPath.
Następnie odwołać się do tego identyfikatora, używając url() jako wartości clip-path.
Animowanie przyciętego obszaru
Przejścia i animacje CSS można zastosować do elementu clip-path, aby uzyskać ciekawe efekty.
W kolejnym przykładzie animuję okrąg po najechaniu kursorem, przechodząc między 2 okręgami o innej wartości promienia.
Przycinanie animacji można wykorzystać na wiele sposobów. Kilka pomysłów na animację za pomocą funkcji clip-path w CSS Tricks.
Fot. Matthew Henry z serii Burst.