Hvordan lage fantastiske effekter med CSS-former

Feb 2, 2026

hvordan

[1. 3]

Frontend utviklere har en tendens til å tenke i rektangler; rektangler inne i rektangler inne i rektangler inne i rektangler. Vi kan ansette triks med grenser for å lage sirkler eller trekanter, men egentlig er de fortsatt bare rektangulære bokser i forkledning. Vel, dette er i ferd med å bytte med CSS. Former, A. W3C. Kandidat anbefaling som vil endre måten du tenker på.

Juletilbud: Spar opptil 47% på et abonnement på Net Magazine

CSS-figurer lar deg lage geometriske former ved hjelp av formfunksjoner: sirkel (), ellipsis (), innsats () og polygon (), og bruk dem til elementer eller effekter som klipping og filtre. Dessuten kan figurene påvirke strømmen av innholdet, slik at du kan pakke inn tekst pent rundt funksjoner som sirkulære avatarer.

Kanskje den kraftigste formfunksjonen er Polygon (), da det lar deg lage komplekse vilkårlig former ved hjelp av ubegrensede punkter som er definert ved hjelp av koordinatpar. Hvis du har brukt SVG. , dette vil bli kjent for deg.

I denne opplæringen skal vi bruke polygoner med klippetiden for å kutte en geometrisk form ut av teksten, slik at bare området som er innelukket i polygonen, er synlig. Vi legger også til noen enkle overganger for å få effekten til livet. Du kan ta koden for hvert trinn i denne repo fra Github, her .

01. Begynn med HTML

Først, la oss få vår HTML klar. Vi trenger bare en & lt; div & gt; , våre .KLIP Klasse og vår tekst, men som vi skal bruke pseudo-elementer for denne effekten, vil vi også legge til et attributt med samme verdi som teksten, slik at vi kan lese den i CSS i stedet for hardkoding den.

 & lt; div class = "clip" data-innhold = "en clipping demo" & gt;
En klippende demo
& lt; / div & gt;

Deretter vil vi få det til å fylle skjermen og justere tekstsenteret - vi kan bruke noen Flexbox. magi for dette. La oss også stil og størrelse teksten.

 .clip {
// fyll skjerm
posisjon: absolutt;
Topp: 0;
Venstre: 0;
Bredde: 100%;
Høyde: 100%;
// Justering
Skjerm: Flex; // Bruk flex for justering
Justify-innhold: Senter; // horisontal justering
Justeringsartikler: Senter; // vertikal justering
// tekst styling
Font-Family: 'Work Sans', Arial, Helvetica, Sans-Serif; // Arbeidssans er tilgjengelig fra Google Fonter
font-vekt: 800;
FONT-STØRRELSE: 8REM;
Tekstjustering: Senter;
tekst-transform: store bokstaver;
}

02. Legg til litt stil

Nå kan vi stille ::før og ::etter pseudo-elementer, med hvert lag et lag på toppen av teksten. Som standard, ::etter vil ha den høyeste Z-indeksen. Den praktiske attraksjon velgeren vil lese verdien av vår datainnhold Egenskap.

Pseudo-elementene vil dele posisjonen og flexboxegenskapene, slik at vi kan refactor våre CSS litt og utnytte kraften til SCSS for å holde vår stilarte ryddige. Skriftens styling vil bli arvet. Vi bruker ... Å betegne egenskapene vi allerede har dekket.

 .clip {
...
// posisjon selv (& amp;) og pseudo-elementer (før / etter)
& amp;
& amp ;:: Før,
& amp ;:: Etter {
  posisjon: absolutt;
  Topp: 0;
  Venstre: 0;
  Bredde: 100%;
  Høyde: 100%;
  Skjerm: Flex; // Bruk flex for justering
  Justify-innhold: Senter; // horisontal justering
  Justeringsartikler: Senter; // vertikal justering
}
& amp ;:: Før,
& amp ;:: Etter {
  Innhold: Attr (Datainnhold); // Bruk attributtverdien som innholdet
}
}

Resultatet i nettleseren skal se identisk ut, fordi pseudo-elementene sitter direkte på toppen av teksten. Du kan endre sine stiler i DevTools. for å se hvordan de er lagdelt.

03. Sett bakgrunner og farger

Tid til å gi hvert lag en annen farge og bakgrunn - La oss gå for noen dristige, på trend, neonfarger som vi har forhåndsdefinert som variabler. Vi kan også tvinge teksten til å vikle på flere linjer ved hjelp av et CSS-polstring triks i stedet for å legge disse i HTML.

Dette er nyttig som ellers måtte vi bruke to forskjellige typer linjeskift: lt; br & gt; inne i & lt; div & gt; og jo mer uklart \EN i attributtet.

 .clip {
...
& amp;
& amp ;:: Før,
& amp ;:: Etter {
  polstring: 0 50%;
  Box-dimensjonering: Border-boks;
}
& amp ;:: før {
  Farge: $ hvit;
  Bakgrunn: $ rosa;
}
& amp ;:: Etter {
  Farge: $ rosa;
  Bakgrunn: $ blå;
}
}

Padding-trikset fungerer ved å gi teksten null horisontal bredde, og tvinge nettleseren til å vikle hvert ord til en ny linje.

04. Klipp teksten

Tid for interessant bit - vi er klare til å begynne å klippe vår tekst. Vi skal lage et diagonalt klips, som skiver skjermen i to trekanter fra bunnen til venstre til høyre.

De ::før pseudo-elementet vil bare være synlig i øverst til venstre trekant, og ::etter Pseudo-elementet vil bare være synlig i den nederste høyre trekanten. Her er koden for å oppnå det:

 .clip {
...
& amp ;:: før {
  Clip-bane: polygon (0 0, 100% 0, 0 100%, 0 100%);
}
& amp ;:: Etter {
  Clip-bane: Polygon (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

Dette skaper polygoner med fire poeng. Hvert punkt er beskrevet av et koordinatpar; bare en x (venstre til høyre) og y (topp til bunn) verdi. Verdien kan være absolutt (for eksempel: px) eller relativ (for eksempel:%). Poengene refereres til øverst til venstre, så poengene på 100% 100% er nederst til høyre.

Tenk deg linjer som forbinder hver av punktene i den rekkefølgen de er oppført for å danne figurene. I den ::før Polygon det starter i øverst til venstre (0 0) , beveger seg over skjermen til høyre (100% 0) , og deretter ned til nederst til venstre (0 100%) .

Forhåpentligvis vil du se din klippetekst nå. Endre størrelsen på nettleseren, og du vil se klippen reagere tilsvarende.

Hvis du bruker Chrome, vil du sannsynligvis se noen omsmakte problemer mens du endrer størrelsen på, forårsaket av Chromes komposittlag. Dessverre, fordi demoen er fullskjerm, anbefales det anbefalte Vil-endring: Transform eiendom og Transform: Translatez (0) hack ikke rette opp dette. Men hvis du bytter .KLIP til posisjon: fast; det fungerer.

 Clip {
& amp;
& amp ;:: Før,
& amp ;:: Etter {
  posisjon: fast;
}
}

Husk at Chrome prøver å være nyttig, og denne løsningen vil påvirke ytelsen. Sørg for å profilere ytelse når du gjør ting som dette i produksjonen.

05. Legg til overganger

Nå som vi har vår klippetekst, la oss få det til liv med noen overganger. Den gode nyheten er at du bare kan overgå klipp-sti eiendom slik at nettleseren gjør alt det harde arbeidet. La oss aktivere overganger på pseudo-elementene, og deretter definere fire forskjellige stater til overgang mellom.

Stat 1: Dette er den opprinnelige tilstanden, så la oss lage tre andre

Legg til hver blokk på bunnen av CSS mens du går, så du kan se hvordan det ser ut.

Stat 2: Flytt trekantene fra hverandre for å avsløre bakgrunnen

Dette vil se litt ut som flagget i Republikken Kongo. Fjerning av 20 prosent fra spissen av hver polygon trekant vil gjøre trikset.

Stat 3: Morph trianglene i rektangler

Dette ligner på den franske Tricolor, i omvendt.

Hva med det fjerde koordinske paret? Vel, dette er hvor det kommer i nyttig. Det viser seg at overgangen klipp-sti Fungerer bare hvis formfunksjonen som brukes, er den samme (så polygon- og gt polygon) og antall som brukes er det samme - nettleseren vil overgå hvert enkeltpunkt. Derfor har vi det fjerde skjulte punktet - det gjør at vi kan sømløst overgå fra en trekant til et rektangel, vi avslører bare det fjerde punktet når vi trenger det.

 .clip {
& amp ;:: før {
  Clip-Path: Polygon (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp ;:: Etter {
  Clip-Path: Polygon (100% 0, 100% 100%, 60% 100%, 60% 0);
}
}

Stat 4: Vri de polygonene

Stikker til vårt flaggtema, dette ville ligne "Jeg krever en slepe" i verden av maritime flaggsignalering.

Her vrider vi polygonene slik at de krysser i midten og danner to trekanter hver. Dette er når overganger kan hjelpe deg med å forstå koordinatparene. Ved å virkelig bremse overgangen, kan du se hvordan hvert punkt beveger seg over skjermen til sin nye posisjon, og du begynner å forstå hvordan bestillingen av paret påvirker overgangen. Det gir deg faktisk ganske mye kontroll over overgangen.

 .clip {
& amp ;:: før {
  Clip-Path: Polygon (100% 0, 0 0, 100% 100%, 0 100%);
}
& amp ;:: Etter {
  Clip-bane: polygon (100% 0, 100% 100%, 0 0, 0 100%);
}
}

Pakk opp

Vi er alle satt, men vi kan ikke endre statene, noe som betyr at du ikke kan se overgangene i aksjon. Det er mange måter å oppnå dette på, så det er opp til deg. I repo og codepen har jeg brukt en 100 prosent JavaScript-fri løsning med skjulte radioknapper og ~ General Sibling Selector - ta en titt. Du kan også sjekke ut denne opplæringenes kodepen her .

Denne artikkelen oppstod opprinnelig i utgave 298 av nett , magasinet for profesjonelle webdesignere og utviklere - tilbyr de nyeste nye webtrender, teknologier og teknikker. Kjøp problem 298 her eller Abonner på nettet her .

Spesielt juletilbud: Spar opptil 47% på et abonnement på nettet for deg eller en venn til julen. Det er et begrenset tilbud, så flytte raskt ...

Relaterte artikler:

28 fremragende eksempler på CSS
Hvordan lage en Pyramid Layout med CSS-former
CSS-triks for å revolusjonere weboppsettene dine

Hvordan lage fantastiske effekter med CSS-former

01. Begynn med HTML

02. Legg til litt stil

03. Sett bakgrunner og farger

04. Klipp teksten

05. Legg til overganger

Pakk opp

hvordan - Mest populære artikler

Hvordan stoppe brillene dine tåke når du bruker en ansiktsmaske

Slik vri et lag i Photoshop: En komplett guide

Hvordan tegne en person

Legg til SVG-filtre med CSS

Animer SVG med JavaScript

Hvordan lage et digitalt oljemaleri ved hjelp av Artrage

5 tips for å forbedre VR-kreasjonene

Bruk partikler til å lage et 3D-splash

Kategorier