Cum să creați efecte uimitoare cu forme CSS

Sep 17, 2025

să

Dezvoltatorii Frontend tind să se gândească la dreptunghiuri; dreptunghiuri în interiorul dreptunghiurilor din dreptunghiuri în interiorul dreptunghiurilor. S-ar putea să folosim trucuri cu frontiere pentru a face cercuri sau triunghiuri, dar într-adevăr sunt încă doar cutii dreptunghiulare în deghizare. Ei bine, este pe cale să se schimbe Css. Forme, A. W3c. Recomandarea candidatului care va schimba modul în care credeți.

Oferta de Craciun: Economisiți până la 47% pe un abonament la revista Net

Formele CSS vă permit să creați forme geometrice utilizând funcții de formă: cerc (), elipsis (), inset () și poligon () și aplicați-le la elemente sau efecte cum ar fi tăierea și filtrele. Mai mult, formele pot afecta fluxul conținutului, permițându-vă să înfășurați textul în jurul caracteristicilor ca avatare circulare.

Poate că cea mai puternică funcție de formă este Polygon (), deoarece vă permite să creați forme arbitrare complexe folosind puncte nelimitate definite folosind perechi de coordonate. Dacă ați folosit SVG. , acest lucru vă va fi familiar.

În acest tutorial, vom folosi poligoane cu proprietatea Clip-Path pentru a reduce o formă geometrică din textul nostru, astfel încât numai zona închisă în interiorul poligonului să fie vizibilă. De asemenea, vom adăuga câteva tranziții simple pentru a aduce efectul la viață. Puteți să luați codul pentru fiecare pas în acest repo de la Github, aici .

01. Începeți cu HTML

În primul rând, hai să ne pregătim HTML. Avem nevoie doar de a & Lt; div & gt; , al nostru .clamă Clasa și textul nostru, dar, după cum vom folosi Pseudo-elemente pentru acest efect, vom adăuga, de asemenea, un atribut cu aceeași valoare ca și textul, astfel încât să îl putem citi în CSS mai degrabă decât să îl codificăm.

 & Lt; Div clasa = "clip" de date-content = "un demo clipping" & gt;
O demo de tăiere
& lt; / div & gt;

Apoi, vrem să facem să umpleți ecranul și să alinieze centrul de text mort - putem folosi unele Flexbox Magic pentru asta. Haideți, de asemenea, stilul și dimensiunea textului.

 .Clip {
// completați ecranul
Poziție: absolută;
Top: 0;
stânga: 0;
Lățime: 100%;
Înălțime: 100%;
// aliniere
Afișaj: Flex; // utilizați flex pentru aliniere
Justificare-Conținut: Centrul; // aliniere orizontala
Align-elemente: centru; // aliniere verticală
// Styling text
Font-Family: "Sans de lucru", Arial, Helvetica, Sans-Seif; // Sans de lucru este disponibil de la Google Fonts
Greutate font: 800;
font-dimensiune: 8rem;
Text-align: centru;
Transformare text: majusculă;
}

02. Adăugați un anumit stil

Acum putem stilul ::inainte de și ::după Pseudo-elemente, fiecare devenind un strat deasupra textului. În mod implicit, ::după va avea cel mai mare indice Z. La îndemână Attr () selectorul va citi valoarea noastră a noastră Conținutul de date. atribut.

Elementele pseudo-uri vor împărtăși proprietățile poziției și Flexbox, astfel încât să putem refactor ușor CSS și să folosim puterea SCS-urilor pentru a ne păstra coada de stil. Stilul de font va fi moștenit. Folosim ... Pentru a desemna proprietățile pe care le-am acoperit deja.

 .Clip {
...
// poziția de sine (& amp;) și Pseudo-elemente (înainte / după)
& amp;,
& Amp; :: înainte,
& Amp; :: după {
  Poziție: absolută;
  Top: 0;
  stânga: 0;
  Lățime: 100%;
  Înălțime: 100%;
  Afișaj: Flex; // utilizați flex pentru aliniere
  Justificare-Conținut: Centrul; // aliniere orizontala
  Align-elemente: centru; // aliniere verticală
}
& Amp; :: înainte,
& Amp; :: după {
  Conținut: Attr (conținut de date); // Utilizați valoarea atributului ca conținut
}
}

Rezultatul în browser ar trebui să arate identic, deoarece elementele pseudo-ele stau direct pe partea de sus a textului. Puteți modifica stilurile lor în Devtools. pentru a vedea cum sunt stratificate.

03. Setați fundaluri și culori

Timpul pentru a da fiecărui strat o culoare diferită și fundal - să mergem pentru niște culori îndrăznețe, pe tendință, pe care le-am predefinit ca variabile. De asemenea, putem forța textul să se înfășoare pe mai multe linii folosind un truc de căptușeală CSS, mai degrabă decât să le adăugați în HTML.

Acest lucru este util ca altfel ar trebui să folosim două tipuri diferite de pauze de linie: & lt; br & gt; în interiorul & Lt; div & gt; și cu atât mai obscură \A în atribut.

 .Clip {
...
& amp;,
& Amp; :: înainte,
& Amp; :: după {
  Padding: 0 50%;
  Dimensionarea casetei: Border-cutie;
}
& Amp; :: înainte de {
  Culoare: $ alb;
  Fundal: $ roz;
}
& Amp; :: după {
  Culoare: $ roz;
  Fundal: $ albastru;
}
}

Tricoul de umplere funcționează oferind lățimea orizontală a textului zero, forțând browser-ul să înfășoare fiecare cuvânt la o linie nouă.

04. clip textul

Timpul pentru bitul interesant - Suntem gata să începem tăierea textului nostru. Vom crea un clip diagonal, felicând ecranul în două triunghiuri din partea de jos din stânga sus.

::inainte de Pseudo-elementul va fi vizibil numai în triunghiul din stânga sus și ::după Pseudo-elementul va fi vizibil numai în triunghiul din dreapta jos. Iată codul pentru a realiza că:

 .Clip {
...
& Amp; :: înainte de {
  Clip-calea: poligon (0 0, 100% 0, 0 100%, 0 100%);
}
& Amp; :: după {
  Clip-traseu: Poligon (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

Acest lucru creează poligoane cu patru puncte. Fiecare punct este descris de o pereche de coordonate; pur și simplu o valoare x (stânga la dreapta) și y (de sus în jos) valoare. Valoarea poate fi absolută (de exemplu: Px) sau relativă (de exemplu:%). Punctele sunt referite la stânga sus, astfel încât punctele la 100% 100% sunt în partea dreaptă jos.

Imaginați-vă linii care leagă fiecare dintre punctele în ordinea în care sunt enumerate pentru a forma formele. În ::inainte de Poligonul începe în partea stângă sus (0 0) , se deplasează pe ecran în partea dreaptă sus (100% 0) , apoi până la stânga jos (0 100%) .

Sperăm că veți vedea textul tăiat acum. Redimensionați browserul și veți vedea că tăierea reacționează corespunzător.

Dacă utilizați Chrome, probabil veți vedea unele probleme de reparație în timp ce redimensionați, cauzate de straturile compozite ale lui Chrome. Din păcate, deoarece demo-ul este complet, recomandat Will-Schimbare: Transformare proprietate și Transformare: Translatez (0) hack nu rectificace acest lucru. Cu toate acestea, dacă comutați .clamă la Poziție: fixă; functioneaza.

 clip {
& amp;,
& Amp; :: înainte,
& Amp; :: după {
  Poziție: fixă;
}
}

Rețineți că Chrome încearcă să fie de ajutor, iar această soluție va avea un impact asupra performanței. Asigurați-vă că ați proiectat performanța atunci când faceți lucruri de genul acesta în producție.

05. Adăugați tranziții

Acum că avem textul nostru tăiat, să o aducem la viață cu niște tranziții. Vestea bună este că poți pur și simplu să tranziți Clip-Path. proprietate, astfel încât browserul să facă toate lucrările grele. Să permitem tranzițiile pe elementele pseudo-elemente și apoi să definesc patru state diferite pentru a tranziționa între.

Statul 1: Acesta este starea inițială, deci să creăm trei altele

Adăugați fiecare bloc în partea de jos a CSS pe măsură ce mergeți, astfel încât să puteți vedea cum arată.

Statul 2: Mutați triunghiurile în afară ușor pentru a dezvălui fundalul

Acest lucru va arăta un pic ca steagul Republicii Congo. Îndepărtarea a 20% din vârful fiecărui triunghi poligon va face trucul.

Starea 3: Morful triunghiurilor în dreptunghiuri

Acest lucru este similar cu tricolorul francez, în sens invers.

Cum rămâne cu cea de-a patra pereche de coordonate? Ei bine, aici vine util. Se pare că tranziția Clip-Path. Funcționează numai dacă funcția de formă utilizată este aceeași (deci Polygon & GT; poligon) și numărul de puncte utilizate este același - browserul va tranziționa fiecare punct individual. De aceea avem acel al patrulea punct ascuns - ne permite să trecem fără probleme de la un triunghi la un dreptunghi, doar dezvăluim acest al patrulea punct când avem nevoie de ea.

 .Clip {
& Amp; :: înainte de {
  Clip-traseu: poligon (0 0, 40% 0, 40% 100%, 0 100%);
}
& Amp; :: după {
  Cale de clip: poligon (100% 0, 100% 100%, 60% 100%, 60% 0);
}
}

Statul 4: răsuciți acei poligoane

Lipirea cu tema noastră de pavilion, acest lucru seamănă cu "Am nevoie de o remorcă" în lumea semnalizării pavilionului maritim.

Aici se răsucesc poligoanele astfel încât acestea să treacă în centru și să formeze două triunghiuri fiecare. Aceasta este atunci când tranzițiile vă pot ajuta să înțelegeți perechile coordonate. Prin încetinirea într-adevăr a tranziției, puteți vedea modul în care fiecare punct se deplasează pe ecran în noua poziție și începeți să înțelegeți cum comandarea perechilor afectează tranziția. De fapt, vă oferă o mulțime de control asupra tranziției.

 .Clip {
& Amp; :: înainte de {
  Clip-cale: Poligon (100% 0, 0 0, 100% 100%, 0 100%);
}
& Amp; :: după {
  Clip-calea: Poligon (100% 0, 100% 100%, 0 0, 0 100%);
}
}

Învelire

Suntem toți stabiliți, dar nu suntem încă capabili să schimbăm statele, ceea ce înseamnă că nu puteți vedea tranzițiile în acțiune. Există multe modalități de a realiza acest lucru, deci depinde de tine. În repo și codepen, am folosit o soluție de 100% JavaScript-free cu butoane radio ascunse și selectorul general de frate - aruncați o privire. De asemenea, puteți verifica codul acestui tutorial Aici .

Acest articol a apărut inițial în numărul 298 din net , Revista pentru designeri de web profesioniști și dezvoltatori - oferind cele mai recente noi tendințe web, tehnologii și tehnici. Cumpărați problema 298 aici sau Abonați-vă la net aici .

Ofertă specială de Crăciun: Economisiți până la 47% pe un abonament la net Pentru dvs. sau pentru un prieten pentru Crăciun. Este o ofertă limitată, deci mișcați repede ...

Articole similare:

28 Exemple remarcabile de CSS
Cum se creează un aspect piramidă cu forme CSS
CSS Tricks pentru a revoluționa layout-urile Web

Cum să creați efecte uimitoare cu forme CSS

01. Începeți cu HTML

02. Adăugați un anumit stil

03. Setați fundaluri și culori

04. clip textul

05. Adăugați tranziții

Învelire

să - Cele mai populare articole

6 sfaturi rapide pentru a vă îmbunătăți desenul penului de pensule

Cum se face un logo în Photoshop

Cum se creează iarbă 3D

Cum să pictați arta de animație colorată în Photoshop

Cum se construiește o aplicație AR

Cum să pictezi ca un maestru al secolului al XIX-lea

Cum se dezvoltă creaturi mitice

Învățați să executați designul și sprinturile de conținut

Categorii