Come creare effetti sorprendenti con forme CSS

Sep 15, 2025

Come si fa

Gli sviluppatori di frontend tendono a pensare in rettangoli; Rettangoli all'interno dei rettangoli all'interno dei rettangoli all'interno dei rettangoli. Potremmo usare trucchi con bordi per fare cerchi o triangoli, ma in realtà sono ancora solo scatole rettangolari sotto mentite spoglie. Bene questo sta per cambiare con CSS. Forme, A. W3C. Raccomandazione candidata che cambierà il modo in cui pensi.

Offerta natalizia: Risparmia fino al 47% su un abbonamento a Net Magazine

Le forme CSS consentono di creare forme geometriche utilizzando le funzioni di forma: cerchio (), ellissi (), inserto () e poligono () e applicarli a elementi o effetti come ritaglio e filtri. Inoltre, le forme possono influenzare il flusso del contenuto, consentendo di avvolgere il testo ordinatamente in circolazione di funzioni come avatar circolari.

Forse la funzione di forma più potente è Polygon () in quanto consente di creare forme arbitrarie complesse usando punti illimitati definiti utilizzando coppie di coordinate. Se hai usato Svg. , questo ti sarà familiare.

In questo tutorial, utilizzeremo i poligoni con la proprietà del clip-percorso per tagliare una forma geometrica dal nostro testo in modo che sia visibile solo l'area racchiusa all'interno del Polygon. Aggiungeremo anche alcune semplici transizioni per portare l'effetto alla vita. Puoi prendere il codice per ogni passo in questo repo da GitHub, qui .

01. Inizia con HTML

Per prima cosa, prendiamo il nostro HTML pronto. Abbiamo solo bisogno di un & lt; div & gt; , nostro .clip Classe e il nostro testo, ma come utilizzeremo Pseudo-Elements per questo effetto, aggiungeremo anche un attributo con lo stesso valore del testo in modo da poterlo leggere nel CSS piuttosto che in modo dura.

 & lt; div class = "clip"-content-content = "una demo di clipping" e GT;
Una demo di ritaglio
& lt; / div & gt;

Successivamente, vogliamo farti riempire lo schermo e allineare il Testo Dead Center - Possiamo usare alcuni Flexbox. Magia per questo. Inoltre, stile e dimensiona il testo.

 .Clip {
// Schermo di riempimento
Posizione: assoluto;
Top: 0;
a sinistra: 0;
Larghezza: 100%;
Altezza: 100%;
// allineamento
Display: flex; // uso flex per l'allineamento
Giustificazione-Contenuto: Centro; // allineamento orizzontale
Allinea-Articoli: Centro; // allineamento verticale
// Styling di testo
Fammari: "Lavoro Sans", Arial, Helvetica, Sans-Serif; // il lavoro sans è disponibile da Google Fonts
Peso dei font: 800;
Dimensioni del carattere: 8Rem;
Text-Align: Center;
Trasformazione del testo: maiuscolo;
}

02. Aggiungi un po 'di stile

Ora possiamo modellare il ::prima e ::dopo Pseudo-elementi, con ciascuno che diventa uno strato sopra il testo. Per impostazione predefinita, ::dopo avrà il più alto Z-index. Il comodo attr () il selettore leggerà il valore del nostro Contenuto dei dati attributo.

Gli pseudo-element condivideranno le proprietà di posizione e flexbox, in modo che possiamo refatturare leggermente il nostro CSS e sfruttare il potere di SCSS per mantenere il nostro stile stylesheet in ordine. Lo styling dei font sarà ereditato. Stiamo usando ... Per denotare le proprietà che abbiamo già coperto.

 .Clip {
...
// Posiziona sé (& amp;) e pseudo-elementi (prima / dopo)
& amp;
& amp; :: prima,
& amp; :: dopo {
  Posizione: assoluto;
  Top: 0;
  a sinistra: 0;
  Larghezza: 100%;
  Altezza: 100%;
  Display: flex; // uso flex per l'allineamento
  Giustificazione-Contenuto: Centro; // allineamento orizzontale
  Allinea-Articoli: Centro; // allineamento verticale
}
& amp; :: prima,
& amp; :: dopo {
  Contenuto: ATT (contenuto dei dati); // Utilizzare il valore dell'attributo come contenuto
}
}

Il risultato nel browser dovrebbe sembrare identico, perché gli pseudo-elementi sono seduti direttamente sopra il testo. Puoi modificare i loro stili in Devtools. per vedere come sono stratificati.

03. Imposta sfondi e colori

È ora di dare a ciascun livello un colore e uno sfondo diversi - andiamo per alcuni colori al neon audaci, on-tendenza che abbiamo predefinito come variabili. Possiamo anche forzare il testo per avvolgere più linee utilizzando un trucco di imbottitura CSS piuttosto che aggiungerli nell'HTML.

Questo è utile come altrimenti dovremmo usare due diversi tipi di interruzioni di riga: & lt; BR & GT; dentro il & lt; div & gt; e il più oscuro \UN nell'attributo.

 .Clip {
...
& amp;
& amp; :: prima,
& amp; :: dopo {
  Imbottitura: 0 50%;
  ridimensionamento della scatola: Border-Box;
}
& amp; :: Prima {
  Colore: $ bianco;
  Sfondo: $ rosa;
}
& amp; :: dopo {
  Colore: $ rosa;
  Sfondo: $ blu;
}
}

Il trucco di imbottitura funziona dando il testo zero orizzontale larghezza orizzontale, costringendo il browser a avvolgere ogni parola a una nuova riga.

04. Clip il testo

Tempo per il bit interessante - siamo pronti per iniziare a ritagliare il nostro testo. Creereremo una clip diagonale, affettando lo schermo in due triangoli dal basso a sinistra in alto a destra.

Il ::prima pseudo-elemento sarà visibile solo nel triangolo in alto a sinistra, e ::dopo Pseudo-element sarà visibile solo nel triangolo in basso a destra. Ecco il codice per ottenere questo:

 .Clip {
...
& amp; :: Prima {
  Clip-Path: Polygon (0 0, 100% 0, 0 100%, 0 100%);
}
& amp; :: dopo {
  Clip-Path: Polygon (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

Questo crea poligoni con quattro punti. Ogni punto è descritto da una coppia di coordinata; Semplicemente un valore X (da sinistra a destra) e Y (parte superiore in basso). Il valore può essere assoluto (ad esempio: PX) o relativo (ad esempio:%). I punti sono referenziati in alto a sinistra, quindi i punti a 100% 100% sono in basso a destra.

Immagina le linee che collegano ciascuno dei punti nell'ordine in cui sono elencati per formare le forme. Nel ::prima Poligono Inizia in alto a sinistra (0 0) , si muove sullo schermo in alto a destra (100% 0) , e poi giù fino in fondo a sinistra (0 100%) .

Speriamo che vedrete il tuo testo tagliato ora. Ridimensiona il browser e vedrai il ritaglio reagire di conseguenza.

Se stai usando Chrome, probabilmente vedrai alcuni problemi di ridisegno ridimensionando, causato dai livelli compositi di Chrome. Sfortunatamente, perché la demo è a schermo intero, raccomandato Will-Change: Transform proprietà e Trasforma: Translatez (0) Hack non rettificare questo. Tuttavia, se cambi .clip per Posizione: fissa; Funziona.

 clip {
& amp;
& amp; :: prima,
& amp; :: dopo {
  Posizione: fissa;
}
}

Tieni presente che Chrome sta cercando di essere d'aiuto, e questa soluzione alternativa avrà un impatto sulle prestazioni. Assicurati di profilare le prestazioni quando fai cose come questa nella produzione.

05. Aggiungi transizioni

Ora che abbiamo il nostro testo clipped, portiamolo alla vita con alcune transizioni. La buona notizia è che puoi semplicemente transizione il clip-path proprietà in modo che il browser faccia tutto il duro lavoro. Abilitiamo le transizioni sui pseudo-elementi e quindi definiscono quattro stati diversi per passare dalla transizione.

Stato 1: questo è lo stato iniziale, quindi creiamo altri tre

Aggiungi ogni blocco nella parte inferiore del tuo CSS mentre vai, quindi puoi vedere come appare.

Stato 2: muovi leggermente i triangoli per rivelare lo sfondo

Questo sembrerà un po 'come la bandiera della Repubblica del Congo. La rimozione del 20% dalla punta di ogni triangolo poligono farà il trucco.

Stato 3: morph i triangoli in rettangoli

Questo è simile al tricolore francese, al contrario.

Che dire di quella quarta coppia coordinata? Bene, questo è dove è utile. Si scopre che la transizione clip-path Funziona solo se la funzione di forma utilizzata è la stessa (quindi poligono e gt; poligono) e il numero di punti utilizzato è lo stesso: il browser transilirà ogni singolo punto. Ecco perché abbiamo quel quarto punto nascosto - ci consente di passare perfettamente da un triangolo a un rettangolo, riveliamo solo quel quarto punto quando ne abbiamo bisogno.

 .Clip {
& amp; :: Prima {
  Clip-Path: Polygon (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp; :: dopo {
  Path clip: Polygon (100% 0, 100% 100% 100%, 60% 100%, 60% 0);
}
}

Stato 4: Torcere quei poligoni

Attaccante al nostro tema della bandiera, questo assomiglierebbe "Ho bisogno di un rimorchiatore" nel mondo della segnalazione della bandiera marittima.

Qui stiamo torcendo i poligoni in modo che attraversino il centro e formano due triangoli ciascuno. Questo è quando le transizioni possono aiutarti a capire le coppie di coordinate. Ravveramente rallentando la transizione, puoi vedere come ogni punto si muove attraverso lo schermo nella sua nuova posizione, e inizi a capire come l'ordinamento delle coppie riguarda la transizione. In realtà ti dà un sacco di controllo sulla transizione.

 .Clip {
& amp; :: Prima {
  Clip-Path: Polygon (100% 0, 0 0, 100% 100%, 0 100%);
}
& amp; :: dopo {
  Clip-Path: Polygon (100% 0, 100% 100%, 0 0, 0 100%);
}
}

Incartare

Siamo tutti impostati ma non siamo ancora in grado di cambiare gli stati, il che significa che non puoi vedere le transizioni in azione. Ci sono molti modi per raggiungere questo obiettivo, quindi dipende da te. Nel repo e nel codepen, ho usato una soluzione priva di Javascript 100 per cento con pulsanti radio nascosti e il selettore generale del fratello generale - Dai un'occhiata. Puoi anche controllare questo tutorial's Codepen Qui .

Questo articolo è originariamente apparso in emissione 298 di netto , la rivista per web designer e sviluppatori professionisti - offrendo le ultime nuove tendenze web, tecnologie e tecniche. Comprare il problema 298 qui o Iscriviti alla rete qui .

Offerta speciale di Natale: Risparmia fino al 47% su un abbonamento a rete per te o un amico per Natale. È un'offerta limitata, quindi muovi rapidamente ...

Articoli Correlati:

28 esempi eccezionali di CSS
Come creare un layout della piramide con forme CSS
Trucchi CSS per rivoluzionare i tuoi layout web

Come creare effetti sorprendenti con forme CSS

01. Inizia con HTML

02. Aggiungi un po 'di stile

03. Imposta sfondi e colori

04. Clip il testo

05. Aggiungi transizioni

Incartare

Come si fa - Articoli più popolari

Come disegnare Asuka da Neon Genesis Evangelion

condurre test utente gratuiti e veloci con UserLook

Come disegnare un naso

Dipingi una vita fissa espressiva in acrilico

4 gradini per VDM migliore con Zbrush

Come lavorare con il video HTML

Crea immagini 3D interattive con tre.js

Crea una doccia Meteor in 3DS Max

Categorie