Generator CSS clip-path
Darmowy online generator CSS clip-path. Projektuj kształty polygon, circle, ellipse i inset z przeciąganymi punktami, podglądem na żywo i kopiowaniem kodu CSS jednym kliknięciem.
Czym jest clip-path w CSS?
clip-path to właściwość CSS, która przycina element do podstawowego kształtu lub ścieżki. Wszystko poza kształtem jest ukrywane, więc prostokątny obraz lub kontener można zamienić w trójkąt, koło, sześciokąt, skośny baner lub dowolny wielokąt bez edytowania samego obrazu.
Które przeglądarki obsługują clip-path?
Wszystkie nowoczesne przeglądarki obsługują podstawowe funkcje kształtów używane przez ten generator: polygon(), circle(), ellipse() i inset(), w tym Chrome, Edge, Firefox, Safari i Opera. Prefiks -webkit-clip-path jest potrzebny tylko w bardzo starych wersjach Safari na mobile.
Jak działa tryb wielokąta?
W trybie wielokąta podgląd pokazuje każdy wierzchołek jako przeciągalny punkt. Przeciągnij punkt, aby go przenieść, kliknij dwukrotnie puste miejsce, aby dodać nowy, kliknij punkt, aby go zaznaczyć, i użyj przycisku usuń, aby go zdjąć. Wartość CSS aktualizuje się na bieżąco współrzędnymi procentowymi.
Co oznaczają procenty w polygon()?
Każdy wierzchołek zapisuje się jako parę X Y w procentach, mierzoną od lewego górnego rogu elementu. Ponieważ wartości są względne wobec rozmiaru elementu, kształt skaluje się razem z nim i pozostaje responsywny przy każdej szerokości ekranu.
Jaka jest różnica między circle, ellipse i inset?
circle(promień at x y) wycina koło o jednym promieniu, ellipse(rx ry at x y) pozwala na różne promienie poziome i pionowe, a inset(góra prawo dół lewo) wycina prostokąt zwężony od każdego boku. Ten generator udostępnia suwaki i pola liczbowe dla wszystkich parametrów.
Czy clip-path wpływa na układ lub kliknięcia?
clip-path jest czysto wizualny. Element zachowuje oryginalny box w układzie, więc nic wokół się nie przesuwa. Jednak zdarzenia wskaźnika, jak kliknięcia, działają tylko w widocznym przyciętym obszarze — przydatne przy przyciskach o niestandardowym kształcie.
Czy można animować clip-path?
Tak. Przeglądarki płynnie przechodzą między dwiema wartościami clip-path, gdy funkcja kształtu i liczba punktów są zgodne, np. z dużego insetu do małego albo między dwoma wielokątami o tej samej liczbie wierzchołków. Animuj właściwością CSS transition.
Czy mój obraz lub dane są wysyłane na serwer?
Nie. Obraz podglądu to gradient rysowany lokalnie na canvasie, a wszystkie obliczenia odbywają się w Twojej przeglądarce. Nic nie jest wysyłane na serwer, więc po załadowaniu narzędzie działa też offline.
Jakie są typowe zastosowania clip-path?
Popularne zastosowania to ukośne sekcje hero, sześciokątne lub okrągłe maski awatarów, trójkątne wskazniki dymków, kreatywne kolaże zdjęć, ścięte narożniki kart i przyciski o nietypowych kształtach — wszystko bez programu do obróbki zdjęć.
Jak korzystać z Generator CSS clip-path
Nadaj kształt dowolnemu elementowi za pomocą CSS clip-path zamiast edytować obrazy. Wybierz funkcję kształtu, przeciągnij uchwyty i skopiuj CSS gotowy na produkcję. Wszystko działa lokalnie w Twojej przeglądarce.
- Wybierz tryb: Wielokąt, Okrąg, Elipsa lub Inset.
- W trybie Wielokąt przeciągaj punkty wierzchołków, kliknij dwukrotnie puste miejsce, aby dodać punkt, i zaznacz jeden przed usunięciem.
- W trybach Okrąg, Elipsa i Inset dostrój każdą wartość suwakami albo wpisz dokładny procent.
- Patrz, jak podgląd na żywo aktualizuje się nad lokalnie wygenerowaną przykładową grafiką z gradientem.
- Skopiuj jednolinijkową regułę clip-path i wklej ją do swojego arkusza stylów.
Utrzymaj tę samą liczbę punktów wielokąta między dwoma stanami, a będziesz mógł płynnie animować kształt przejściem CSS.
Powiązane narzędzia
- Generator Box Shadow CSS Darmowy generator box-shadow CSS online. Wizualnie twórz piękne cienie z regulowanym przesunięciem, rozmyciem, rozprzestrzenieniem, kolorem i inset. Podgląd na żywo i natychmiastowe kopiowanie kodu.
- Generator gradientów CSS Twórz oszałamiające gradienty CSS wizualnie. Generuj gradienty liniowe, radialne i stożkowe z wieloma punktami kolorów, kątami i pozycjami. Natychmiast kopiuj gotowy do produkcji kod CSS.
- Generator border-radius Darmowy kreatywny generator border-radius online. Przeciągnij 8 uchwytów lub wybierz kształt blob, aby tworzyć organiczne formy CSS i kopiować kod od razu.
- Konwerter kolorów Darmowy konwerter kolorów online. Natychmiastowa konwersja formatów HEX, RGB, HSL, HSV z wizualnym wyborem koloru. 100% prywatne, działa w przeglądarce.
- Generator easing CSS Darmowy online generator easing CSS. Przeciągaj punkty kontrolne cubic-bezier na interaktywnej krzywej, wybierz jeden z 18 presetów, oglądaj zapętloną animację kulki i natychmiast kopiuj funkcję czasu.
- Generator text-shadow CSS Darmowy online generator text-shadow CSS. Nakładaj wiele warstw cienia z przesunięciem, rozmyciem, kolorem i nieprzezroczystością, wypróbuj presety Neon, 3D, Retro i natychmiast kopiuj CSS.
- Upiększacz CSS Formatuj i upiększaj kod CSS natychmiast. Konwertuj zminifikowany CSS na czytelny kod z konfigurowalnymi opcjami.
- Minifikator CSS Darmowy minifikator CSS online. Natychmiast kompresuj i optymalizuj kod CSS, usuwając białe znaki, komentarze i niepotrzebne znaki. Zmniejsz rozmiar pliku dla szybszej wydajności sieci.