Hogyan lehet elképesztő hatást létrehozni a CSS formákkal

Sep 14, 2025

kézikönyv

A Frontend fejlesztők hajlamosak téglalapokon gondolkodni; téglalapok belső téglalapok belül téglalapok belső téglalapok. Lehet, hogy trükköket használhatunk a határokkal, hogy köröket vagy háromszögeket készítsünk, de tényleg még mindig csak téglalap alakú dobozok vannak az álruhában. Nos, ez hamarosan megváltozik Css Formák, a W3c Jelölt ajánlás, amely megváltoztatja a gondolkodásmódját.

Karácsonyi ajánlat: Takarítson meg akár 47% -ot a net magazin előfizetésére

CSS alakzatok lehetővé teszik, hogy a geometriai formák segítségével alakja funkciók: kör (), ellipszis (), süllyesztés () és a sokszög (), és alkalmazza azokat az elemeket, vagy hatások, mint például nyírás és szűrők. Ráadásul az alakzatok befolyásolhatják a tartalom áramlását, lehetővé téve Önt, hogy a szöveget szépen olyan jellemzői, mint a körkörös avatárok.

Talán a legerősebb alakfunkció a sokszög (), mivel lehetővé teszi, hogy komplex tetszőleges formákat hozzon létre korlátlan pontokkal, amelyek koordináta párokkal vannak megadva. Ha használta Svg , ez ismeri magát.

Ebben a bemutatóban poligonokat használunk a klip-útvonal tulajdonsággal, hogy egy geometriai alakot vágjunk ki a szövegünkből, hogy csak a sokszögben lévő terület látható legyen. Emellett hozzáadunk néhány egyszerű átmenetet, hogy az élethez való hatást fejezzük ki. Megragadhatja a kódot az egyes lépésekhez ebben a repo Github, itt .

01. Kezdje a HTML-vel

Először kapjuk a HTML-t. Szükségünk van egy & lt; div & gt; , a miénk .csipesz osztály és a szöveget, de mi lesz a pszeudo-elemek ezt a hatást, akkor is hozzá egy attribútumot ugyanolyan értékű, mint a szöveg, így tudjuk olvasni a CSS helyett kódban is.

 & lt; div osztály = "Clip" adat-tartalom = "A Clipping Demo" & gt;
Egy vágási demó
& lt; / div & gt;

Ezután meg akarjuk tölteni a képernyőt, és összehangoljuk a szöveges halott központot - használhatunk néhányat Flexbox varázslat erre. Tegyük fel a szöveget és méretét.

 .clip {
// töltés képernyő
Pozíció: abszolút;
Top: 0;
Bal: 0;
Szélesség: 100%;
Magasság: 100%;
// igazítás
Kijelző: FLEX; // Használja a FLEX-et az igazításhoz
Indokolás-tartalom: Központ; // vízszintes igazítás
Align-tételek: Központ; // függőleges igazítás
// szövegstílus
Font-Család: "Sans", Arial, Helvetica, Sans-Serif; // Munka SANS elérhető a Google Betűtípusokból
Betűtípus: 800;
betűméret: 8REM;
Text-Align: Center;
Szöveges transzformáció: nagybetűk;
}

02. Adjon hozzá néhány stílust

Most meg tudjuk stílusozni a ::előtt és ::után pszeudo-elemek, mindegyik egy réteg a szöveg tetején. Alapértelmezés szerint, ::után lesz a legmagasabb z-index. A hasznos ATTR () A választó elolvassa a mi értékünk értékét adat-tartalom tulajdonság.

Az ál-elemek megosztja a helyzetét és flexbox tulajdonságait, így tudjuk refactor CSS kissé kihasználja az erejét SCSS tartani a stíluslap rendezett. A betűtípus stílusa öröklődik. Használjuk ... A már lefedett tulajdonságok jelölésére.

 .clip {
...
// pozíció önálló (& amp;) és pszeudo-elemek (előtt / után)
& amp ;,
& amp; :: korábban,
& amp; :: Miután {
  Pozíció: abszolút;
  Top: 0;
  Bal: 0;
  Szélesség: 100%;
  Magasság: 100%;
  Kijelző: FLEX; // Használja a FLEX-et az igazításhoz
  Indokolás-tartalom: Központ; // vízszintes igazítás
  Align-tételek: Központ; // függőleges igazítás
}
& amp; :: korábban,
& amp; :: Miután {
  Tartalom: Att (adat-tartalom); // Használja az attribútum értékét tartalomként
}
}

A böngésző eredményének azonosnak kell lennie, mert a pszeudo-elemek közvetlenül a szöveg tetején ülnek. A stílusokat módosíthatja Devtools hogy lássuk, hogyan vannak rétegezve.

03. Állítsa be a háttereket és a színeket

Ideje, hogy minden egyes réteg egy másik színt és hátteret adjon - menjünk néhány merész, on-trend, neon színeket, amelyeket előre definiáltunk változóként. A szöveget több vonalakra is kényszeríthetjük a CSS Padding trükk segítségével, nem pedig hozzáadva ezeket a HTML-ben.

Ez hasznos, ha két különböző típusú vonalszakadást kell használnunk: & lt; br & gt; benne & lt; div & gt; és minél több homályos \ A az attribútumban.

 .clip {
...
& amp ;,
& amp; :: korábban,
& amp; :: Miután {
  Padding: 0 50%;
  Box-méretezés: Border-Box;
}
& amp; :: korábban {
  Szín: $ White;
  Háttér: $ Pink;
}
& amp; :: Miután {
  Szín: $ PINK;
  Háttér: $ Blue;
}
}

A padding trükk működik azáltal, hogy a szöveg nulla vízszintes szélességét, arra kényszerítve a böngésző, hogy lezárja minden szó egy új sort.

04. A szöveget rögzítse

Idő az érdekes bitre - készen állunk arra, hogy megkezdjük a szövegünket. Átlós klipet fogunk létrehozni, a képernyőt két háromszögbe szagolva balra balra jobbra.

A ::előtt A pszeudo-elem csak a bal felső háromszögben látható lesz, és ::után A pszeudo-elem csak a jobb alsó háromszögben látható lesz. Itt van a kód, hogy elérje:

 .clip {
...
& amp; :: korábban {
  Clip-Path: Poligon (0 0, 100% 0, 0 100%, 0 100%);
}
& amp; :: Miután {
  Clip-Path: Poligon (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

Ez négy ponttal rendelkező sokszögeket hoz létre. Minden pontot egy koordináta párosítja; Egyszerűen egy X (balról jobbra) és y (felülről lefelé) értékre. Az érték abszolút (például: px) vagy relatív lehet (például:%). A pontok a bal felső sarokban hivatkoznak, így a pontok 100% 100% a jobb alsó sarokban vannak.

Képzeld el az egyes pontokat összekötő vonalakat a sorrendben, hogy felsorolják az alakzatot. Ban,-ben ::előtt A poligon a bal felső sarokban kezdődik (0 0) , a képernyőn jobbra mozog (100% 0) , majd lefelé balra balra (0 100%) .

Remélhetőleg most látja a vágott szövegét. A böngésző átméretezése, és látni fogja, hogy a vágás ennek megfelelően reagál.

Ha Chrome-t használ, akkor valószínűleg látni fog néhány átméretezés közben, amelyet a Chrome kompozit rétegei okoznak. Sajnos, mert a demó teljes képernyős, az ajánlott Will-Change: Transform ingatlan és Átalakítás: fordítás (0) Hack nem orvosolja ezt. Ha azonban átkapcsol .csipesz nak nek Pozíció: fix; működik.

 Clip {
& amp ;,
& amp; :: korábban,
& amp; :: Miután {
  Pozíció: fix;
}
}

Ne feledje, hogy a Chrome hasznos lesz, és ez a megoldás hatással lesz a teljesítményre. Győződjön meg róla, hogy a profil teljesítményét, amikor ilyen dolgokat csinál a termelésben.

05. Átmenetek hozzáadása

Most, hogy megkaptuk a vágott szövegünket, hozzuk létre az életet néhány átmenethez. A jó hír az, hogy egyszerűen átállhatsz klip-pálya olyan tulajdonság, hogy a böngésző az összes kemény munkát végzi. Engedje meg az átmeneteket a pszeudo-elemekre, majd határozza meg a négy különböző állapotot az átmenet között.

1. állam: Ez a kezdeti állapot, így hozzunk létre három másikat

Adja hozzá minden blokkot a CSS alján, ahogy megy, így láthatja, hogy néz ki.

2. állam: Mozgassa a háromszögeket kissé, hogy felfedje a hátteret

Ez kicsit úgy néz ki, mint a Kongói Köztársaság zászlója. 20 százalék eltávolítása az egyes poligon háromszög csúcsától a trükk.

3. állam: Morph a háromszögek téglalapokká

Ez hasonló a francia tricolorhoz, fordítva.

Mi van azzal a negyedik koordinátával? Nos, ez az, ahol hasznos. Kiderül, hogy az átmenet klip-pálya Csak akkor működik, ha az alkalmazott alakfunkció ugyanaz (SO poligon & gt; sokszög) és az alkalmazott pontok száma megegyezik - a böngésző minden egyes pontot átáll. Ezért van, hogy a negyedik rejtett pont - lehetővé teszi számunkra, hogy zökkenőmentesen háromszög egy téglalapot, csak azt mutatják, hogy a negyedik pont, amikor szükségünk van rá.

 .clip {
& amp; :: korábban {
  Clip-Path: Poligon (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp; :: Miután {
  Clip-Path: Poligon (100% 0, 100% 100%, 60% 100%, 60% 0);
}
}

4. állam: Twist ezek a sokszögek

Ragaszkodva a zászló témájához, ez hasonlít a "Szükséges vontató" -ra a tengerészeti zászló jelátvitel világában.

Itt megfordítjuk a sokszögeket, hogy a központban keresztezzék, és két háromszöget alkotnak. Ez az, amikor az átmenetek segíthetnek abban, hogy megértsük a koordináta párokat. Ha tényleg lassul az átmenet, láthatja, hogy az egyes pontok hogyan mozognak a képernyőn az új pozícióba, és elkezdi megérteni, hogy a párok megrendelése befolyásolja az átmenetet. Valójában nagyon sok irányítást ad az átmenet felett.

 .clip {
& amp; :: korábban {
  Clip-Path: Poligon (100% 0, 0 0, 100% 100%, 0 100%);
}
& amp; :: Miután {
  Clip-Path: Poligon (100% 0, 100% 100%, 0 0, 0 100%);
}
}

Becsomagol

Mindannyian meg vannak állítva, de még nem tudjuk megváltoztatni az államokat, ami azt jelenti, hogy nem látja az átmeneteket a cselekvésben. Sok módja van ennek eléréséhez, így rajtad múlik. A repo és a codepenben 100% -os JavaScript-mentes megoldást használtam a rejtett rádiógombokkal és a ~ általános testvérválasztóval - nézd meg. Nézze meg ezt a bemutatót is itt .

Ez a cikk eredetileg a 298. \ t háló , A magazin a professzionális webes tervezők és fejlesztők számára - kínálja a legújabb új web trendeket, technológiákat és technikákat. Vásároljon 298 kérdést itt vagy Iratkozzon fel itt Netre .

Speciális karácsonyi ajánlat: Akár 47% -ot takaríthat meg egy előfizetéshez Önnek vagy barátjának karácsonyra. Ez egy korlátozott ajánlat, így gyorsan mozog ...

Kapcsolódó cikkek:

28 A CSS kiemelkedő példái
Hogyan készítsünk piramis elrendezést a CSS formákkal
CSS trükkök, hogy forradalmasítsák webes elrendezéseit

Hogyan lehet elképesztő hatást létrehozni a CSS formákkal

01. Kezdje a HTML-vel

02. Adjon hozzá néhány stílust

03. Állítsa be a háttereket és a színeket

04. A szöveget rögzítse

05. Átmenetek hozzáadása

Becsomagol

kézikönyv - Most Popular Articles

KRITA oktatóanyagok: Ismerje meg a digitális művészeti szoftver alapjait

Gyors reaktív blog létrehozása Svelte és Sapper

Hangvezérelt UI létrehozása

Hogyan kell az arcot az animációhoz

Hogyan építsünk gyorsabb weboldalakat

Hozzon létre egy Cinemagrothot a Photoshop 60 másodperc alatt

Hogyan készítsünk 3D-t az Illustrator-ban

A kreatív tervezési rövidítés teljesítésének titkai

Kategóriák