Wycinanie elementów w CSS dzięki właściwości clip-path

CSS jest rozwijany z każdym dniem, otrzymując coraz to nowe funkcjonalności, które ułatwiają nam tworzenie stron internetowych. Właśnie o jednej z nich chciałbym pomówić w tym artykule, a dokładnie o właściwości clip-path, która to pozwala nam na wycinanie elementów, a tym samym tworzenie mniej prostokątnych stron internetowych. 🙂


Trochę ogólnych informacji.

Eksperymentalna właściwość clip-path, pozwala na schowanie części elementu na stronie internetowej, co sprawia, że ten wygląda jakby został przycięty. W pewnym momencie zastąpiła bardziej ubogą w opcje właściwość clip, która w tym momencie posiada status zdeprecjonowanej.


Wsparcie przeglądarek.

Smutne jest to, że wszystko co nowe przez długi czas nie jest zdatne do użytku przez brak wsparcia od niektórych przeglądarek. Nie inaczej jest w tym przypadku, bo omawiana dzisiaj właściwość nie jest wspierana przez wszystko co pochodzi od Microsoftu, czyli dokładnie IE oraz Edge.

Jeśli jesteś zainteresowany dokładnym wsparciem dla poszczególnych przeglądarek, to możesz sprawdzić tę oto stronę.


No dobrze, ale jak w ogóle używać tej właściwości?

Wszystko co jesteśmy w stanie wykonać zamyka się w czterech wartościach (w sumie to pięciu, bo jeszcze domyślne none) Opowiedzmy sobie o każdej z nich:

Wartość inset();

Określa ona margines, który zostaje wycięty z każdej ze stron naszego elementu tworząc prostokąt (który swoją drogą może posiadać zaokrąglone rogi, ale o tym później).

Na całą wartość składają się 2 parametry: margin oraz radius. Jak działają? Już tłumaczę:

Parametr margin.

Standardowo rozpocznijmy od przykładu:

See the Pen inset(); #1 by Robert Orliński (@ROrlilnski) on CodePen.

Kod ten działa podobnie jak padding w CSSie. Pierwsza wartość reguluje jego wielkość u góry i reszta idzie wg. wskazówek zegara.

Parametr radius.

Znów stwórzmy prosty przykład:

See the Pen inset(); #2 by Robert Orliński (@ROrlilnski) on CodePen.

Używając słowa kluczowego “round” możemy zaokrąglić rogi wspólnie lub z osobna. Mało tego, każdy z nich może zostać zedytowany inaczej z każdej ze stron, tak jak na tym przykładzie:

See the Pen inset(); #3 by Robert Orliński (@ROrlilnski) on CodePen.

Wszystkie wartości zostały opisane w komentarzu do kodu. 🙂

Dobrze, wiemy już jak tworzyć prostokąty, więc nie przedłużając przejdźmy do kolejnych elementów!

Wartość circle();

Wartość ta pozwala nam na wycinanie kół wypełnionych konkretnym elementem na stronie. Już tłumaczę jak możemy ich używać, standardowo spójrzmy na konkretny przykład:

See the Pen circle(); by Robert Orliński (@ROrlilnski) on CodePen.

Za pomocą tego zapisu przycinamy nasz element do formy koła o promieniu 50px (pierwszy parametr) oraz pozycji w 150px od lewej oraz 80px od góry (parametr po słowie kluczowym at).

Oczywiście nie musimy wszystkiego pisać w pikselach. Pierwszy parametr może zawierać wszystkie jednostki, używane do ustalania wielkości elementów, z kolei po słowie at możemy używać tego samego oraz słów kluczowych znanych z np. ustawiania pozycji tła w CSSie, to znaczy center, bottom, top-center i innych.

Wartość ellipse();

Działa ona dokładnie w ten sam sposób, co wartość circle();, z jedną małą różnicą. Na początku nie określamy jednej wielkości, a dwie dla każdej ze stron naszej elipsy. Tak oto prezentuje się działający przykład:

See the Pen ellipse(); by Robert Orliński (@ROrlilnski) on CodePen.

Jak widać pierwsza wartość (100px) odpowiada za promień elipsy w poziomie, z kolei druga (50px) reguluje tę wielkość w poziomie.

Wartość polygon();

Chyba najczęściej używana podczas przycinania elementów za pomocą omawianej dzisiaj właściwości. Może jak zwykle sprawdźmy działanie przykładu:

See the Pen polygon(); #1 by Robert Orliński (@ROrlilnski) on CodePen.

Jak widać za pomocą polygon() możemy tworzyć nieograniczoną liczbę punków, które stają się wierzchołkami przyciętego wielokąta. Pierwsza wartość wyrażona w jakiejkolwiek jednostce (w tym przypadku procentach) określa odległość pierwszego punktu od górnej krawędzi elementu, z kolei druga wartość oznacza taką samą odległość od lewej strony.


Wycinanie elementów SVG.

Jeśli chcemy wycinać pojedyncze elementy w celu ozdobienia naszej strony, to świetnym pomysłem będzie użycie clipPath w elemencie SVG.

Aby tego dokonać musimy zamknąć znacznik <defs> w tagu <svg>, po czym możemy korzystać ze wszystkiego co zostało nam udostępnione dla elementów SVG (można to znaleźć np. na stronie MDN. Również w tym samym serwisie można przeczytać poradnik dotyczący tworzenia tego typu elementów.


Tworzenie animacji za pomocą właściwości clip-path.

Tu sprawa jest prosta, a jednocześnie pozwala na tworzenie naprawdę świetnych animacji. Wszystko opiera się na ogólnie znanych keyframe’sach.

Na początku stosujemy właściwość clip-path na elemencie tak jak robiliśmy to we wcześniejszych częściach artykułu. Później stosujemy znacznik @keyframes do stworzenia animacji np. w ten sposób:

See the Pen Animacja właściwości clip-path by Robert Orliński (@ROrlilnski) on CodePen.

Używając tego kodu stworzyliśmy obiekt przycięty do figury prostokąta (tak wiem, clip-path był do tego niezwykle potrzebny 🙂). Po 2 sekundach zmienia się ona w znak “X”.


Generator.

Pod koniec warto wspomnieć o istnieniu świetnego generatora elementów przyciętych za pomocą omawianej dziś właściwości.

Nazywa się Clippy i pozwala kopiować kod gotowych kształtów oraz tworzyć zupełne nowe tylko z użyciem myszki!


Podsumowanie.

Tak oto prezentuje się eksperymentalna właściwość clip-path. Jak widać posiada ona naprawdę sporo funkcji i osobiście czekam, aż Microsoft wprowadzi ją chociażby do swojej najnowszej przeglądarki.

A Ty czego używasz do tworzenia nieregularnych kształtów na stronach internetowych? Pochwal się w komentarzu! 🙂

Programista zakochany w JavaScript'cie, twórca stron internetowych i jak widać od niedawna bloger 🙂
2 comments Add yours
  1. co prawda nie jestem koderem, a bardziej grafikiem webowym, który coś nie coś za to kojarzy z tematu, ale wygląda to prze kozacko no i bardzo fajne uproszczenie by nie wsadzać pngów o takich kształtach…

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *