CSS - Clip-Path - Bugajsky Blog

Podziel się ze znajomymi

Ostatnim czasem zauważyłem, że bardzo popularne stały się niesymetryczne kształty elementów na stronach internetowych, zwłaszcza na stronach typu One Page. Pomyślałem, że dobrze jest się dowiedzieć jak coś takiego się robi od strony kodu. Po poczytaniu o tym oraz napisaniu kilku przykładów, postanowiłem podzielić się z czytelnikami mojego bloga zdobytą wcześniej wiedzą.

onePage

Chodzi nam o podobny efekt jak na screenie powyżej.

Podstawowy kod

Z tym kodem dziś będziemy pracować, dodając odpowiednią właściwość w klasie first.

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Clip Path</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="first"></div>
</body>
</html>

style.css

body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background: blue;
}

.first {
    height: 50vh;
    background: red;
}

Właściwość Clip Path

CSS udostępnia nam specjalną właściwość, służącą do przycinania kształtów danego elementu HTML. Domyślna wartość tej właściwości to none. Co oznacza, że jest wyłączone. Warto również mieć na uwadze fakt, że starsze wersje przeglądarek nie wspierają tego rozwiązania. Możemy podejrzeć na stronie www.caniuse.com, które przeglądarki obsługują omawianą dziś właściwość. Aby właściwość działała na Safari należy dodać -webkit-clip-path.

Wartości clip-path

Mamy do dyspozycji 4 wartości jakie możemy wykorzystać pracując z omawianą dziś własnością: inset(), circle(), ellipse(), polygon().

inset()

Funkcja ta, tworzy nam prostokąt, który może posiadać dodatkowo zaokrąglone rogi. Przyjmuje dwa parametry. Pierwszym z nich jest margin, czyli odstęp od innych elementów. W ten sposób możemy określić margines z każdej strony elementu. Drugim parametrem jest radius, czyli zaokrąglenia rogów, który może być różny dla każdego narożnika prostokąta.

inset(margin round radius);

Przykład

clip-path:inset(5px 10px 15px 20px round 5px 10px 15px 20px);
-webkit-clip-path:inset(5px 10px 15px 20px round 5px 10px 15px 20px);

screen1

circle()

Funkcja tworząca okrąg. Przyjmuje dwa parametry, które określają promień – radius oraz pozycję środka koła – position. Parametry te nie są obowiązkowe.

circle(radius position);

Przykład

clip-path:circle(100px at left);
-webkit-clip-path:circle(100px at left);

screen2

ellipse()

Funkcja tworzy elipse. Przyjmuje trzy parametry, promień szerokości – rx, promień wysokości – ry oraz pozycję środka elipsy – position.

ellipse(rx ry position);

Przykład

clip-path:ellipse(100vw 100% at top);
-webkit-clip-path:ellipse(100vw 100% at top);

screen3

polygon()

Funkcja jest odpowiedzialna za utworzenie wielokąta. Przyjmuje dwa parametry: style oraz coords. Trzeba pamiętać, że coords jest wymagany.

Parametr style określa czy nowo powstały wielokąt ma być wypełniony czy też nie. Wypełnienie określane jest słowami kluczowymi: evenodd i nonzero.

Parametr coords to kolejne wartości par współrzędnych. Pierwsza wartość pary to x, zaś druga to y.

polygon(style coords);

Przykład

clip-path:polygon(0 0, 100% 0, 100% 60%, 60% 100%, 40% 100%, 0 60%);
-webkit-clip-path:polygon(0 0, 100% 0, 100% 60%, 60% 100%, 40% 100%, 0 60%);

screen4

Podsumowanie

W tym wpisie zająłem się omówieniem właściwości clip-path, która około rok temu została zaimplementowana do CSS i często jest wykorzystywana przy tworzeniu stron internetowych typu One Page. Jak widzimy daje całkiem sporo możliwości i ich wykorzystanie zależy tylko od kreatywności osoby projektującej.

Kolejne wpisy już niebawem, a za kilka dni podsumowanie roku 2017. Zapraszam od obserwowania bloga i komentowania.

Pozdrawiam,
sirmarbug