Twórz ciekawe kształty obrazów za pomocą właściwości clip-path w CSS

Użycie przycinania w kodzie CSS może pomóc nam w odejściu od wszystkich elementów w naszych projektach, które wyglądają jak pudełka. Za pomocą różnych podstawowych kształtów lub pliku SVG możesz utworzyć ścieżkę obcinania. Następnie wytnij te części elementu, których nie chcesz pokazywać.

Rachel Andrew

Elementy na stronach internetowych są zdefiniowane w prostokątnym polu. Nie oznacza to jednak, że wszystko musi wyglądać jak pudełko. Za pomocą właściwości CSS clip-path możesz wycinać fragmenty obrazu lub innego elementu, aby uzyskać ciekawe efekty.

W powyższym przykładzie obraz dymka jest kwadratowy (źródło). Użycie wartości clip-path i podstawowej wartości kształtu circle()spowoduje przycięcie dodatkowego nieba wokół balonu, pozostawiając na stronie okrągły obraz.

Ponieważ obraz jest linkiem, możesz zobaczyć coś innego na temat usługi clip-path. Klikać można tylko widoczny obszar obrazu, ponieważ zdarzenia nie są wywoływane w przypadku ukrytych części obrazu.

Przycinanie można stosować do dowolnego elementu HTML, a nie tylko do obrazów. Istnieje kilka sposobów tworzenia clip-path. W tym poście przyjrzymy się im bliżej.

Zgodność z przeglądarką

W przypadku starszych przeglądarek wersją zastępczą może być zezwolenie przeglądarce na zignorowanie właściwości clip-path i wyświetlenie nieprzyciętego obrazu. Jeśli to problem, możesz przetestować clip-path w zapytaniu o funkcje i zaproponować inny układ w przypadku przeglądarek, które nie obsługują tej funkcji.

@supports(clip-path: circle(45%)) {
  /* code that requires clip-path here. */
}

Kształty podstawowe

Właściwość clip-path może przyjmować kilka wartości. Wartość użyta w pierwszym przykładzie to circle(). To jedna z podstawowych wartości kształtu, które są zdefiniowane w specyfikacji kształtu CSS. Oznacza to, że możesz przyciąć obszar, a także użyć tej samej wartości dla shape-outside, aby tekst był przewijany wokół tej figury.

Pełna lista podstawowych kształtów:

• inset()
• circle()
• ellipse()
• polygon()

inset()

Wartość inset() wsuwa obcięty obszar od krawędzi elementu. Można przekazywać wartości dla górnej, prawej, dolnej i lewej krawędzi. Możesz też dodać border-radius, aby zaokrąglić rogi wyciętego obszaru, używając słowa kluczowego round.

W przykładzie mam dwa pola z klasą .box. Pierwsze pole nie jest obcinane, drugie jest obcinane przy użyciu wartości inset().

circle()

Jak widzisz, wartość circle() tworzy okrągły obszar. Pierwsza wartość to długość lub odsetek i jest promieniem koła. Druga opcjonalna wartość umożliwia ustawienie środka koła. W tym przykładzie do ustawienia zaokrąglonego koła w prawym górnym rogu używam wartości słów kluczowych. Możesz też użyć długości lub wartości procentowych.

Uważaj na płaskie krawędzie.

Pamiętaj, że przy tych wartościach kształt zostanie przycięty przez pole marginesu na elemencie. Jeśli na obrazie utworzysz okrąg, który wykracza poza naturalny rozmiar obrazu, uzyskasz płaską krawędź.

ellipse()

Elipsa jest w istocie spłaszczonym okręgiem, dlatego działa bardzo podobnie do circle(), ale przyjmuje promień dla x i promień dla y, oraz wartość dla środka elipsy.

polygon()

Wartość polygon() może Ci pomóc w tworzeniu dość złożonych kształtów, definiując tyle punktów, ile potrzebujesz, poprzez ustawienie współrzędnych każdego z nich.

Aby ułatwić sobie tworzenie wielokątów i sprawdzić możliwości, skorzystaj z generatora clip-path Clippy, a następnie skopiuj kod i wklej go do swojego projektu.

Kształty na podstawie wartości przedziału.

W sekcji Kształty CSS są też kształty z wartości pól. Te wartości odnoszą się do modelu CSS Box – pole treści, pole wypełnienia, pole obramowania i pole marginesu z wartościami kluczowych słów content-box, border-box, padding-box i margin-box.

Wartości te można stosować samodzielnie lub razem z kształtem podstawowym, aby zdefiniować pole odniesienia używane przez kształt. Na przykład następujący kod spowoduje przycięcie kształtu do krawędzi treści.

.box {
  clip-path: content-box;
}

W tym przykładzie koło używa pola odniesienia content-box zamiast pola margin-box (które jest domyślne).

.box {
  clip-path: circle(45%) content-box;
}

Obecnie przeglądarki nie obsługują wartości w polu dla właściwości clip-path. Są one jednak obsługiwane w przypadku shape-outside.

Używanie elementu SVG

Aby uzyskać większą kontrolę nad obszarem przyciętym niż w przypadku podstawowych kształtów, użyj elementu SVG clipPath. Następnie odwołuj się do tego identyfikatora, używając wartości url() jako wartości dla clip-path.

Animowanie przyciętego obszaru

Przejścia i animacje CSS można zastosować w elemencie clip-path, aby uzyskać ciekawe efekty. W kolejnym przykładzie animuję okrąg po najechaniu kursorem, przechodząc między dwoma okręgami o innej wartości promienia.

Animacji można używać z wykrojami na wiele kreatywnych sposobów. Animowanie za pomocą atrybutu clip-path na stronie CSS Tricks zawiera kilka pomysłów.

Zdjęcie wykonane przez Matthewa Henry'ego w trybie seryjnym.