Hur man skapar fantastiska effekter med CSS-former

Sep 16, 2025

Hur

Frontend utvecklare tenderar att tänka i rektanglar; Rektanglar inuti rektanglar inuti rektanglar inuti rektanglar. Vi kan använda tricks med gränser för att göra cirklar eller trianglar, men är de fortfarande bara rektangulära lådor i förklädnad. Ja det här är på väg att byta med Css Former, a W3c Kandidatrekommendation som kommer att förändra det sätt du tror.

Jul erbjudande: Spara upp till 47% på en prenumeration på Net Magazine

CSS-former tillåter dig att skapa geometriska former med hjälp av formfunktioner: cirkel (), ellips (), insats () och polygon () och applicera dem på element eller effekter som klipning och filter. Dessutom kan formerna påverka innehållets flöde, så att du kan fälla texten snyggt runt funktioner som cirkulära avatarer.

Kanske är den mest kraftfulla formfunktionen Polygon () eftersom det låter dig skapa komplexa godtyckliga former med obegränsade punkter som definieras med samordnade par. Om du har använt Svg , det här är känt för dig.

I den här handledningen använder vi polygoner med clip-path-egenskapen för att skära en geometrisk form ut ur vår text så att endast det område som är inneslutet i polygonen är synligt. Vi lägger också till några enkla övergångar för att få effekten till livet. Du kan ta tag i koden för varje steg i denna repo från GitHub, här .

01. Börja med HTML

Först, låt oss få vår HTML redo. Vi behöver bara en & lt; div & gt; , vår .klämma Klass och vår text, men som vi ska använda pseudo-element för den här effekten, lägger vi också till ett attribut med samma värde som texten så att vi kan läsa den i CSS istället för att starta det.

 & lt; Div Class = "Clip" Data-content = "A Clipping Demo" & GT;
En klippning demo
& lt; / div & gt;

Därefter vill vi göra det att fylla i skärmen och anpassa Text Dead Center - vi kan använda vissa Flexbox magi för detta. Låt oss också stila och storleka texten.

 .Clip {
// Fyllskärm
position: absolut;
Topp: 0;
Vänster: 0;
Bredd: 100%;
Höjd: 100%;
// Justering
Visa: Flex; // Använd flex för anpassning
rättfärdiga innehåll: centrum; // horisontell linjering
Justera: Center; // vertikaljustering
// text styling
Font-familj: "Arbete sans", Arial, Helvetica, Sans-Serif; // Arbete SAN är tillgängligt från Google-teckensnitt
FONT-VIKT: 800;
FONT-STORLEK: 8REM;
Text-Justera: Center;
Text-transform: versaler;
}

02. Lägg till lite stil

Nu kan vi stylta ::innan och ::efter Pseudo-element, med var och en ett lager ovanpå texten. Som standard, ::efter kommer att ha det högsta Z-indexet. Den praktiska attr () väljaren kommer att läsa värdet av vårt datainnehåll attribut.

Pseudo-elementen kommer att dela positionen och Flexbox-egenskaperna, så vi kan refactor vår CSS lite och utnyttja kraften i SCSs för att hålla vårt stylesheet städa. Font styling kommer att vara ärvt. Vi använder ... För att beteckna de egenskaper som vi redan har täckt.

 .Clip {
...
// position själv (& amp;) och pseudo-element (före / efter)
& amp ;,
& amp;: Före,
& amp;: efter {
  position: absolut;
  Topp: 0;
  Vänster: 0;
  Bredd: 100%;
  Höjd: 100%;
  Visa: Flex; // Använd flex för anpassning
  rättfärdiga innehåll: centrum; // horisontell linjering
  Justera: Center; // vertikaljustering
}
& amp;: Före,
& amp;: efter {
  Innehåll: ATT (Data-Content); // Använd attributvärdet som innehållet
}
}

Resultatet i webbläsaren ska se identiska, eftersom pseudo-elementen sitter direkt ovanpå texten. Du kan ändra sina stilar i Devtools för att se hur de är lagrade.

03. Ange bakgrunder och färger

Tiden att ge varje lager en annan färg och bakgrund - låt oss gå till lite djärva, on-trend, neonfärger som vi har fördefinierade som variabler. Vi kan också tvinga texten att sätta på flera linjer med hjälp av ett CSS-padding-trick istället för att lägga till dessa i HTML.

Detta är till hjälp, eftersom vi annars skulle behöva använda två olika typer av radbrytningar: & lt; BR & GT; inuti & lt; div & gt; och ju mer dunkelt \ A i attributet.

 .Clip {
...
& amp ;,
& amp;: Före,
& amp;: efter {
  Padding: 0 50%;
  Box-dimensionering: Border-box;
}
& amp; :: före {
  Färg: $ vit;
  Bakgrund: $ Pink;
}
& amp;: efter {
  Färg: $ rosa;
  Bakgrund: $ blå;
}
}

Padding trick fungerar genom att ge texten noll horisontell bredd och tvinga webbläsaren att sätta ihop varje ord till en ny linje.

04. Klipp texten

Tid för den intressanta biten - vi är redo att börja klippa vår text. Vi ska skapa ett diagonalt klipp, skivar skärmen i två trianglar från botten till vänster till höger.

De ::innan pseudo-elementet kommer endast att vara synligt i den övre vänstra triangeln, och ::efter Pseudo-elementet kommer endast att vara synligt i den nedre högra triangeln. Här är koden för att uppnå det:

 .Clip {
...
& amp; :: före {
  Clip-path: Polygon (0 0, 100% 0, 0 100%, 0 100%);
}
& amp;: efter {
  Clip-path: Polygon (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

Detta skapar polygoner med fyra punkter. Varje punkt beskrivs av ett koordinatpar; helt enkelt en x (vänster till höger) och y (topp till botten) värde. Värdet kan vara absolut (till exempel: px) eller relativ (till exempel:%). Poängen refereras till början till vänster, så poängen på 100% 100% är längst ner till höger.

Föreställ dig linjer som ansluter var och en av punkterna i den ordning de är listade för att bilda formerna. I ::innan Polygon börjar det längst upp till vänster (0 0) , rör sig över skärmen längst upp till höger (100% 0) , och sedan ner till botten till vänster (0 100%) .

Förhoppningsvis kommer du att se din klippta text nu. Ändra storlek på webbläsaren och du kommer att se klippningen reagera i enlighet därmed.

Om du använder Chrome, kommer du förmodligen att se några repaint-problem samtidigt som du ändrar, orsakade av Chromes kompositlager. Tyvärr, eftersom demo är helskärm, rekommenderas den rekommenderade kommer att ändra: omvandla egendom och Transform: Translatez (0) Hack Rectify inte. Men om du byter .klämma till Position: Fast; det fungerar.

 Clip {
& amp ;,
& amp;: Före,
& amp;: efter {
  Position: Fast;
}
}

Tänk på att Chrome försöker vara hjälpsam, och denna lösning kommer att påverka prestanda. Var noga med att profilera prestanda när du gör saker som det här i produktionen.

05. Lägg till övergångar

Nu när vi har fått vår klippta text, låt oss ta det till livet med några övergångar. Den goda nyheten är att du helt enkelt kan övergå klämväg egendom så att webbläsaren gör allt det hårda arbetet. Låt oss aktivera övergångar på pseudo-elementen och definiera sedan fyra olika stater för att övergå mellan.

Stat 1: Detta är det ursprungliga tillståndet, så låt oss skapa tre andra

Lägg till varje block längst ner på din CSS när du går, så du kan se hur det ser ut.

Stat 2: Flytta trianglarna något för att avslöja bakgrunden

Detta kommer att se lite ut som flaggan av Republiken Kongo. Att ta bort 20 procent från spetsen av varje polygon triangel kommer att göra tricket.

Stat 3: Morph trianglarna i rektanglar

Detta liknar den franska tricoloren, omvänd.

Vad sägs om det fjärde koordinatparet? Tja, det är där det kommer till nytta. Det visar sig att övergången klämväg Bara fungerar om den använda formfunktionen är densamma (så polygon och gt, polygon) och antalet använda punkter är detsamma - webbläsaren kommer att övergå varje enskild punkt. Därför har vi den fjärde dolda punkten - det gör det möjligt för oss att se sömlöst från en triangel till en rektangel, vi avslöjar bara den fjärde punkten när vi behöver det.

 .Clip {
& amp; :: före {
  Clip-Path: Polygon (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp;: efter {
  Clip-Path: Polygon (100% 0, 100% 100%, 60% 100%, 60% 0);
}
}

Stat 4: Vrid dessa polygoner

Stickar till vårt flaggtema, det skulle likna "Jag behöver en bogserbåt" i Maritime flaggs-signalering.

Här vrider vi polygonerna så att de korsar i mitten och bildar två trianglar vardera. Det här är när övergångar kan hjälpa dig att förstå koordinatparen. Genom att verkligen sakta ner övergången kan du se hur varje punkt rör sig över skärmen till sin nya position, och du börjar förstå hur parternas beställning påverkar övergången. Det ger dig faktiskt en hel del kontroll över övergången.

 .Clip {
& amp; :: före {
  Clip-path: Polygon (100% 0, 0 0, 100% 100%, 0 100%);
}
& amp;: efter {
  Clip-path: Polygon (100% 0, 100% 100%, 0 0, 0 100%);
}
}

Sammanfatta

Vi är alla satt men vi kan ännu inte ändra staterna, vilket betyder att du inte kan se övergångarna i aktion. Det finns många sätt att uppnå detta, så det är upp till dig. I repo och Codepen har jag använt en 100 procent JavaScript-fri lösning med dolda radioknappar och den allmänna syskonväljaren - ta en titt. Du kan också kolla in den här handledarens Codepen här .

Denna artikel uppträdde ursprungligen i fråga 298 av netto , tidningen för professionella webbdesigners och utvecklare - som erbjuder de senaste nya webbtrender, teknik och tekniker. Köp utgåva 298 här eller Prenumerera på nätet här .

Special Jul Erbjudande: Spara upp till 47% på en prenumeration på nätet för dig eller en vän till jul. Det är ett begränsat erbjudande, så rör dig snabbt ...

Relaterade artiklar:

28 Utestående exempel på CSS
Hur man skapar en pyramidlayout med CSS-former
CSS-tricks att revolutionera dina webbutikplatser

Hur man skapar fantastiska effekter med CSS-former

01. Börja med HTML

02. Lägg till lite stil

03. Ange bakgrunder och färger

04. Klipp texten

05. Lägg till övergångar

Sammanfatta

Hur - Mest populära artiklar

Hur man ritar ett huvud: en komplett guide

Hur man skapar en skiktad parallax effekt på din webbplats

Hur man kodar Smart Text Effects med CSS

Rita en Bad-Ass Geisha

Bygga appar som fungerar offline

Lär dig att odla lövverk med x-partiklar

Hur man ritar med affinitetsfoto för iPad

Skärpa dina skissförmåga

Kategorier