Ostatnim czasem zauważyłem, iż bardzo popularne stały się niesymetryczne kształty elementów na stronach internetowych, zwłaszcza na stronach typu One Page. Pomyślałem, iż 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ą.
Chodzi nam o podobny efekt jak na screenie powyżej.
Podstawowy kod
Z tym kodem dziś będziemy pracować, dodając odpowiednią adekwatność 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></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ą adekwatność, służącą do przycinania kształtów danego elementu HTML. Domyślna wartość tej adekwatności to none. Co oznacza, iż jest wyłączone. Warto również mieć na uwadze fakt, iż 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ś adekwatność. Aby adekwatność 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 wszystkich 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);
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);
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);
polygon()
Funkcja jest odpowiedzialna za utworzenie wielokąta. Przyjmuje dwa parametry: style oraz coords. Trzeba pamiętać, iż 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%);
Podsumowanie
W tym wpisie zająłem się omówieniem adekwatnoś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
