Een verbluffende effecten maken met CSS-vormen

Feb 10, 2026

Procedures

Frontend-ontwikkelaars hebben de neiging om in rechthoeken te denken; Rechthoeken in rechthoeken in rechthoeken in rechthoeken. We kunnen trucs gebruiken met grenzen om cirkels of driehoeken te maken, maar zijn er echt nog steeds rechthoekige dozen in vermomming. Nou, dit gaat op het punt om mee te veranderen CSS Vormen, een W3C Kandidaataanbeveling die de manier waarop u denkt, zal veranderen.

Kerstaanbieding: Bespaar tot 47% op een abonnement op het Net Magazine

Met CSS-vormen kunt u geometrische vormen maken met behulp van vormfuncties: cirkel (), ellips (), inzet () en polygoon () en breng ze aan op elementen of effecten zoals knippen en filters. Bovendien kunnen de vormen de stroom van de inhoud beïnvloeden, waardoor u tekst netjes kunt wikkelen rond functies zoals cirkelvormige avatars.

Misschien is de meest krachtige vormfunctie polygoon () omdat u kunt maken met complexe willekeurige vormen met behulp van onbeperkte punten die zijn gedefinieerd met behulp van coördinatenparen. Als je hebt gebruikt Svg , dit zal je bekend zijn.

In deze tutorial gebruiken we veelhoeken met de clip-pad-eigenschap om een geometrische vorm uit onze tekst te snijden, zodat alleen het gebied dat in de polygoon is ingesloten zichtbaar is. We voegen ook enkele eenvoudige overgangen toe om het effect tot het leven te brengen. U kunt de code voor elke stap in deze repo pakken Github, hier

01. Begin met HTML

Laten we eerst onze HTML klaarmaken. We hebben gewoon een & LT; DIV & GT; , onze .klem Klasse en onze tekst, maar zoals we pseudo-elementen voor dit effect gebruiken, voegen we ook een attribuut toe met dezelfde waarde als de tekst, zodat we het kunnen lezen in de CSS in plaats van hardcodering.

 & lt; div class = "clip" -gegevensinhoud = "een clipping demo" & GT;
Een knipdemo
& LT; / DIV & GT;

Vervolgens willen we het laten vullen het scherm en het tekstcentrum uitlijnen - we kunnen wat gebruiken Flexbox magie hiervoor. Laten we ook de tekst stijl en formaat.

 .clip {
// vullen scherm
Positie: absoluut;
Top: 0;
Links: 0;
Breedte: 100%;
Hoogte: 100%;
// uitlijning
Display: Flex; // gebruik flex voor uitlijning
rechtvaardigen-inhoud: centrum; // horizontale uitlijning
Align-items: Center; // verticale uitlijning
// Tekststyling
Font-familie: 'Werk Sans', Arial, Helvetica, Sans-Serif; // Werk Sans is verkrijgbaar bij Google-lettertypen
Font-gewicht: 800;
FONT-SIZE: 8REM;
Tekst-Uitlijnen: Centrum;
Tekst-transformatie: hoofdletters;
}

02. Voeg wat stijl toe

Nu kunnen we de ::voordat en ::na pseudo-elementen, waarbij elk een laag bovenop de tekst wordt. Standaard, ::na heeft de hoogste Z-index. De handige Attract () selector leest de waarde van onze gegevensgehalte attribuut.

De pseudo-elementen delen de positie- en FLEXBOX-eigenschappen, zodat we onze CSS enigszins kunnen verfijnen en de kracht van SCS's gebruiken om onze stylesheet netjes te houden. Het lettertype-styling zal worden geërfd. We gebruiken om de eigenschappen aan te duiden die we al hebben gedekt.

 .clip {

// positie zelf (& amp;) en pseudo-elementen (vóór / na)
& amp ;,
& Amp; :: vóór,
& Amp; :: na {
  Positie: absoluut;
  Top: 0;
  Links: 0;
  Breedte: 100%;
  Hoogte: 100%;
  Display: Flex; // gebruik flex voor uitlijning
  rechtvaardigen-inhoud: centrum; // horizontale uitlijning
  Align-items: Center; // verticale uitlijning

& Amp; :: vóór,
& Amp; :: na {
  Inhoud: ATW (gegevensgehalte); // Gebruik de attribuutwaarde als de inhoud

}

Het resultaat in de browser moet er identiek uitzien, omdat de pseudo-elementen direct bovenop de tekst zitten. U kunt hun stijlen wijzigen in Devtools om te zien hoe ze gelaagd zijn.

03. Achtergronden en kleuren instellen

Tijd om elke laag een andere kleur en achtergrond te geven - Laten we gaan voor wat gewaagde, on-trend, neonkleuren die we hebben vooraf gedefinieerd als variabelen. We kunnen ook de tekst dwingen om op meerdere regels in te wikkelen met behulp van een CSS-vullingtruc in plaats van deze in de HTML toe te voegen.

Dit is nuttig omdat we anders twee verschillende soorten lijnonderbrekingen moeten gebruiken: & lt; br & gt; binnen in de & LT; DIV & GT; en hoe meer obscuur \EEN in het attribuut.

 .clip {

& amp ;,
& Amp; :: vóór,
& Amp; :: na {
  Vulling: 0 50%;
  Box-sizing: rand-box;

& Amp; :: vóór {
  Kleur: $ wit;
  Achtergrond: $ roze;

& Amp; :: na {
  Kleur: $ roze;
  Achtergrond: $ blauw;

}

De opvulling werkt door de horizontale breedte van de tekst nul te geven, waardoor de browser elk woord naar een nieuwe lijn moet wikkelen.

04. Clip de tekst

Tijd voor het interessante bit - We zijn klaar om onze tekst te knippen. We gaan een diagonale clip maken, het scherm snijden in twee driehoeken vanaf de onderkant naar rechts rechtsboven.

De ::voordat Pseudo-element zal alleen zichtbaar zijn in de driehoek van de linkerbovenhoek en ::na Pseudo-element zal alleen zichtbaar zijn in de driehoek van de rechterkant. Hier is de code om dat te bereiken:

 .clip {

& Amp; :: vóór {
  Clip-Path: Polygon (0 0, 100% 0, 0 100%, 0 100%);

& Amp; :: na {
  Clip-pad: Polygon (100% 0, 100% 100%, 0 100%, 100% 0);

}

Dit creëert polygonen met vier punten. Elk punt wordt beschreven door een coördinaatpaar; gewoon een x (links naar rechts) en y (bovenaan) waarde. De waarde kan absoluut zijn (bijvoorbeeld: px) of familielid (bijvoorbeeld:%). De punten worden naar links geleverd, dus de punten bij 100% 100% liggen rechtsonder.

Stel je voor dat lijnen elk van de punten in de volgorde aansluiten die ze worden vermeld om de vormen te vormen. In de ::voordat veelhoek het begint in de linkerbovenhoek (0 0) , beweegt over het scherm naar de rechterbovenhoek (100% 0) , en dan naar links (0 100%)

Hopelijk zie je nu je geknipte tekst. Het formaat van de browser wijzigen en u zult het clipping dienovereenkomstig zien reageren.

Als u Chrome gebruikt, ziet u waarschijnlijk wat repaint-problemen tijdens het formuleren, veroorzaakt door de composietlagen van Chrome. Helaas, omdat de demo volledig scherm is, de aanbevolen Will-Change: Transform eigendom en Transformeren: Translatez (0) Hack Corrigeer dit niet. Als u echter schakelt .klem naar Positie: vastgesteld; het werkt.

 Clip {
& amp ;,
& Amp; :: vóór,
& Amp; :: na {
  Positie: vastgesteld;

}

Houd in gedachten dat Chrome probeert behulpzaam te zijn, en deze oplossing zal een impact hebben op de prestaties. Zorg ervoor dat u de prestaties wilt profileren bij het doen van dingen zoals deze in de productie.

05. Voeg transities toe

Nu we onze geknipte tekst hebben, laten we het met sommige overgangen tot leven brengen. Het goede nieuws is dat je eenvoudig de klempad eigendom, zodat de browser al het harde werk doet. Laten we overgangen op de pseudo-elementen inschakelen en definiëren vervolgens vier verschillende staten om tussen te gaan.

Staat 1: Dit is de eerste toestand, dus laten we drie anderen maken

Voeg elk blok aan de onderkant van je CSS toe terwijl je gaat, dus je kunt zien hoe het eruit ziet.

Staat 2: Beweeg de driehoeken iets uit elkaar om de achtergrond te onthullen

Dit ziet er een beetje uit als de vlag van de Republiek Congo. Verwijderen van 20 procent van de punt van elke polygoondriehoek zal de truc doen.

Staat 3: Morph de driehoeken in rechthoeken

Dit is vergelijkbaar met de Franse tricolor, omgekeerd.

Hoe zit het met die vierde Coördinate Pair? Nou, dit is waar het nuttig is. Het blijkt dat overgang klempad Werkt alleen als de gebruikte vormfunctie hetzelfde is (dus polygoon en GT; veelhoek) en het aantal gebruikte punten is hetzelfde - de browser zal elk individueel punt overgaan. Daarom hebben we dat vierde verborgen punt - het stelt ons in staat om naadloos over te gaan van een driehoek naar een rechthoek, we onthullen gewoon dat vierde punt wanneer we het nodig hebben.

 .clip {
& Amp; :: vóór {
  Clip-pad: Polygon (0 0, 40% 0, 40% 100%, 0 100%);

& Amp; :: na {
  Clip-pad: veelhoek (100% 0, 100% 100%, 60% 100%, 60% 0);

}

Staat 4: Draai die polygonen

Plakken aan ons vlagthema, dit lijkt op 'Ik heb een sleepboot' nodig in de wereld van maritieme vlagsignalering.

Hier draaien we de polygonen zodat ze in het midden oversteken en elk twee driehoeken vormen. Dit is wanneer overgangen kunnen helpen om de coördinaatparen te begrijpen. Door de overgang echt te vertragen, kunt u zien hoe elk punt het scherm over het scherm naar zijn nieuwe positie beweegt, en u begint te begrijpen hoe het bestellen van de paren de overgang beïnvloedt. Het geeft je eigenlijk heel veel controle over de overgang.

 .clip {
& Amp; :: vóór {
  Clip-pad: Polygon (100% 0, 0 0, 100% 100%, 0 100%);

& Amp; :: na {
  Clip-pad: Polygon (100% 0, 100% 100%, 0 0, 0 100%);

}

Afronden

We zijn allemaal klaar, maar we kunnen de staten nog niet veranderen, wat betekent dat je de overgangen in actie niet kunt zien. Er zijn veel manieren om dit te bereiken, dus het is aan jou. In de Repo en Codepen heb ik een 100 procent JavaScript-vrije oplossing gebruikt met verborgen keuzerondjes en de ~ algemene sibling-selector - kijk eens. Je kunt ook deze tutorialscodepen bekijken hier

Dit artikel verscheen oorspronkelijk in kwestie 298 van netto- , het magazine voor professionele webontwerpers en ontwikkelaars - het aanbieden van de nieuwste nieuwe webtrends, technologieën en technieken. Koop Probleem 298 hier of abonneren op net hier

Speciale kerstaanbieding: Bespaar tot 47% op een abonnement op net voor jou of een vriend voor Kerstmis. Het is een beperkt aanbod, dus bewegen snel ...

Gerelateerde artikelen:

28 uitstekende voorbeelden van CSS
Hoe een piramide-lay-out te maken met CSS-vormen
CSS-trucs om uw weblay-outs te revolutioneert

Een verbluffende effecten maken met CSS-vormen

01. Begin met HTML

02. Voeg wat stijl toe

03. Achtergronden en kleuren instellen

04. Clip de tekst

05. Voeg transities toe

Afronden

Procedures - Meest populaire artikelen

Verken de gegevensvisualisatie met P5.JS

Maak een WebGL 3D-bestemmingspagina

Aan de slag met Adobe Dimension CC

Hoe een droomachtige Fantasy Forest Scene te schilderen

Hoe u snellere websites bouwen

Wat is nieuw in Angular 4?

Bouw een eenvoudige muziekspeler met reageer

Slijpt uw stillevenschildervaardigheden

Categorieën