Generator CSS Clip Path
Generator CSS clip-path online gratuit. Creează forme polygon, circle, ellipse și inset cu puncte glisabile, previzualizare live și copierea codului CSS dintr-un clic.
Ce este clip-path în CSS?
clip-path este o proprietate CSS care decupează un element după o formă de bază sau un traseu. Tot ce este în afara formei este ascuns, astfel încât poți transforma o imagine sau un bloc dreptunghiular în triunghi, cerc, hexagon, banner înclinat sau orice poligon personalizat, fără a edita imaginea.
Ce browsere acceptă clip-path?
Toate browserele moderne acceptă funcțiile de formă de bază folosite de acest generator: polygon(), circle(), ellipse() și inset(), inclusiv Chrome, Edge, Firefox, Safari și Opera. Prefixul -webkit-clip-path este necesar doar în versiuni foarte vechi de Safari mobil.
Cum funcționează modul poligon?
În modul poligon, previzualizarea afișează fiecare vârf ca un punct glisabil. Trage un punct pentru a-l muta, dă dublu clic pe zona goală pentru a adăuga unul nou, clic pe un punct pentru a-l selecta și folosește butonul de ștergere. Valoarea CSS se actualizează în timp real cu coordonate procentuale.
Ce înseamnă procente în polygon()?
Fiecare vârf se scrie ca o pereche X Y în procente, măsurată din colțul stânga sus al elementului. Deoarece valorile sunt relative la dimensiunea elementului, forma se scalează odată cu el și rămâne responsive la orice lățime de ecran.
Care este diferența dintre circle, ellipse și inset?
circle(raza at x y) decupează un cerc cu o singură rază, ellipse(rx ry at x y) permite raze orizontale și verticale diferite, iar inset(sus dreapta jos stânga) decupează un dreptunghi restrâns de pe fiecare muchie. Acest generator oferă cursoare și câmpuri numerice pentru toți parametrii.
clip-path afectează aspectul paginii sau clicurile?
clip-path este pur vizual. Elementul păstrează caseta originală în pagină, deci nimic din jur nu se mișcă. Totuși, evenimentele de pointer precum clicurile funcționează doar în interiorul zonei decupate vizibile, util pentru butoane cu forme personalizate.
Pot anima un clip-path?
Da. Browserele tranziționează fluid între două valori clip-path când funcția formei și numărul de puncte coincid, de exemplu de la un inset mare la unul mic, sau între două poligoane cu același număr de vârfuri. Animează cu proprietatea CSS transition.
Imaginea sau datele mele sunt încărcate undeva?
Nu. Imaginea de previzualizare este un gradient desenat local pe un canvas, iar toate calculele au loc în browserul tău. Nimic din ce creezi nu este trimis către un server, astfel încât unealta funcționează și offline după încărcare.
Care sunt utilizările uzuale ale clip-path?
Utilizări populare: secțiuni hero diagonale, măști de avatar hexagonale sau circulare, vârfuri triunghiulare ale baloanelor de dialog, colaje foto creative, colțuri de carduri tăiate și butoane cu forme personalizate, totul fără software de editare foto.
Cum se folosește Generator CSS Clip Path
Dă formă oricărui element cu CSS clip-path în loc să editezi imagini. Alege o funcție de formă, trage mânerele și copiază CSS gata de producție. Totul rulează local în browserul tău.
- Alege un mod: Poligon, Cerc, Elipsă sau Inset.
- În modul Poligon trage punctele vârfurilor, dă dublu clic pe spațiul gol pentru a adăuga un punct și selectează unul înainte de a-l șterge.
- În modurile Cerc, Elipsă și Inset, ajustează fiecare valoare cu cursoarele sau scrie un procent exact.
- Urmărește cum previzualizarea live se actualizează peste o imagine eșantion cu gradient generată local.
- Copiază regula clip-path pe o singură linie și lipește-o în foaia ta de stiluri.
Păstrează același număr de puncte ale poligonului între două stări și vei putea anima forma lin printr-o tranziție CSS.
Instrumente conexe
- Generator Box Shadow CSS Generator box-shadow CSS online gratuit. Creați vizual umbre frumoase cu offset, blur, spread, culoare și inset ajustabile. Previzualizare live și copiere instantanee a codului.
- Generator Gradient CSS Creați gradienturi CSS uimitoare vizual. Generați gradienturi liniare, radiale și conice cu mai multe opriri de culoare, unghiuri și poziții. Copiați instantaneu cod CSS gata de producție.
- Generator de Border-radius Generator de border-radius creativ gratuit online. Trage 8 mânere sau alege o formă blob pentru a crea forme CSS organice și copiază codul instantaneu.
- Convertor Culori Convertor culori online gratuit. Convertiți instantaneu formatele HEX, RGB, HSL, HSV cu selector vizual. 100% privat, rulează în browserul dvs.
- Generator Easing CSS Generator CSS easing online gratuit. Trage punctele de control cubic-bezier pe o curbă interactivă, alege dintre 18 presetări, privește o animație cu minge în buclă și copiază funcția de timing instant.
- Generator Text Shadow CSS Generator text-shadow CSS online gratuit. Stivă mai multe straturi de umbră cu offset, blur, culoare și opacitate, încearcă presetări Neon, 3D, Retro și copiază codul CSS instant.
- Frumusețare CSS Formatați și frumusețați codul CSS instantaneu. Convertiți CSS minificat în cod lizibil cu opțiuni personalizabile.
- Minificator CSS Minificator CSS online gratuit. Comprimați și optimizați instantaneu codul CSS eliminând spațiile, comentariile și caracterele inutile. Reduceți dimensiunea fișierului pentru performanță web mai rapidă.