Jak vytvořit úžasné efekty s tvary CSS

Sep 12, 2025

jak

Vývojáři frontend mají tendenci přemýšlet v obdélníkech; obdélníky uvnitř obdélníků uvnitř obdélníků uvnitř obdélníků. Můžeme využít triky s hranicemi, aby se kruhy nebo trojúhelníky, ale opravdu jsou stále jen pravoúhlé boxy v přestrojení. To se chystá změnit CSS. Tvary, a. W3c. Kandidát doporučení, které změní způsob, jakým si myslíte.

Vánoční nabídka: Ušetřete až 47% na předplatném Čistém časopise

Tvary CSS umožňují vytvářet geometrické tvary pomocí funkcí tvaru: kružnice (), elipsis (), vložka () a polygon () a aplikujte je na prvky nebo účinky, jako jsou oříznutí a filtry. A co víc, tvary mohou ovlivnit tok obsahu, což vám umožní zabalit text úhledně kolem funkcí jako kruhové avatary.

Snad nejsilnější funkcí tvaru je polygon (), protože umožňuje vytvářet složité libovolné tvary pomocí neomezených bodů definovaných s použitím souřadnicových párů. Pokud jste použili Svg. To vám bude známo.

V tomto tutoriálu budeme používat mnohoúhelníky s vlastnostmi Clip-Path, abychom snížili geometrický tvar z našeho textu, takže je viditelná pouze oblast uzavřená v rámci polygonu. Také přidáme některé jednoduché přechody, abychom dosáhl účinku k životu. Můžete chytit kód pro každý krok v tomto repo GitHub, tady .

01. Začněte html

Za prvé, pojďme si připravit html. Potřebujeme jen & lt, div a gt; , náš .klip Třída a náš text, ale jak budeme používat pseudo-prvky pro tento efekt, budeme také přidat atribut se stejnou hodnotou jako text, abychom ho mohli přečíst do CSS spíše než tvrdé kódování.

Dále chceme, aby naplnila obrazovku a zarovnali se textem mrtvého centra - můžeme použít některé FlexBox. Kouzlo pro to. Pojďme také styl a velikost textu.

 .Clip {
// Vyplňte obrazovku
Pozice: absolutní;
top: 0;
vlevo: 0;
šířka: 100%;
výška: 100%;
// Zarovnání
Displej: Flex; // Použijte flex pro zarovnání
ospravedlnit-obsah: centrum; // horizontální zarovnání
Zarovnat předměty: Centrum; // vertikální zarovnání
// Stylování textu
Font-Family: 'Pracovní sans', Arial, Helvetica, Sans-Serif; // Pracovní sans je k dispozici od fonty Google
Hmotnost písma: 800;
Velikost písma: 8rem;
Text-ALIGN: CENTER;
Textová transformace: velká;
}

02. Přidat nějaký styl

Teď můžeme styl ::před a ::po pseudo-prvky, s každým stává vrstvou nahoře textu. Ve výchozím stavu, ::po bude mít nejvyšší z-index. Hanebný attr () Volič přečte hodnotu našeho Obsah dat atribut.

Pseudo-elementy budou sdílet vlastnosti pozice a FlexBox, takže můžeme mírně refaktorovat naše CSS a využít sílu SCS, aby se naše stylová uklizená. Stylování písma bude zděděno. Používáme ... označovat vlastnosti, které jsme již pokryli.

 .Clip {
...
// pozice self (& amp;) a pseudo-prvky (před / po)
& amp;
& amp; :: předtím,
& amp; :: Po {
  Pozice: absolutní;
  top: 0;
  vlevo: 0;
  šířka: 100%;
  výška: 100%;
  Displej: Flex; // Použijte flex pro zarovnání
  ospravedlnit-obsah: centrum; // horizontální zarovnání
  Zarovnat předměty: Centrum; // vertikální zarovnání
}
& amp; :: předtím,
& amp; :: Po {
  Obsah: attr (obsah dat); // Použijte hodnotu atributu jako obsah
}
}

Výsledkem v prohlížeči by měl vypadat identicky, protože pseudo-prvky sedí přímo na text textu. Styly můžete upravit v Devtools. vidět, jak jsou vrstveny.

03. Nastavit pozadí a barvy

Čas dát každé vrstvě jinou barvu a pozadí - pojďme na nějaký odvážný, on-trend, neonové barvy, které jsme předdefinovali jako proměnné. Můžeme také přinutit text zabalit na více řádků pomocí CSS polstrování trik, spíše než přidání těchto v HTML.

To je užitečné, protože bychom museli používat dva různé typy přestávek řádků: & lt; br & gt; uvnitř & lt, div a gt; a tím více obskurnější \A v atributu.

 .Clip {
...
& amp;
& amp; :: předtím,
& amp; :: Po {
  Polstrování: 0 50%;
  box-dimenzování: hraniční box;
}
& amp; :: před {
  Barva: bílá $;
  Pozadí: $ Pink;
}
& amp; :: Po {
  barva: $ růžová;
  Pozadí: modrá $;
}
}

Paddding trik funguje tím, že dává textovou nulou vodorovnou šířku, což vynucuje prohlížeč, aby zabalil každé slovo na nový řádek.

04. Připojte text

Čas na zajímavým bitem - Jsme připraveni začít oříznout náš text. Vytvoříme diagonální klip, krájet obrazovku do dvou trojúhelníků ze dna doleva vpravo nahoře.

. \ T ::před Pseudo-element bude viditelný pouze v levém horním trojúhelníku a ::po Pseudo-element bude viditelný pouze ve spodním trojúhelníku. Zde je kód toho dosáhnout:

 .Clip {
...
& amp; :: před {
  Clip-Cesta: mnohoúhelník (0 0, 100% 0, 0 100%, 0 100%);
}
& amp; :: Po {
  Clip-Cesta: mnohoúhelník (100% 0, 100% 100%, 0 100%, 100% 0);
}
}

To vytváří mnohoúhelníky se čtyřmi body. Každý bod je popsán souřadným párem; Jednoduše X (vlevo doprava) a y (horní až spodní) hodnotu. Hodnota může být absolutní (například: px) nebo relativní (například:%). Body se odkazují na levou horní, takže body na 100% 100% jsou v pravém dolním rohu.

Představte si čáry spojující každou z bodů v pořadí, že jsou uvedeny pro tvary. V ::před mnohoúhelník začíná v levé straně (0 0) , přesune přes obrazovku nahoře vpravo (100% 0) a pak dolů dolů doleva (0 100%) .

Doufejme, že teď uvidíte svůj oříznutý text. Změňte velikost prohlížeče a uvidíte oříznutí odpovídajícím způsobem.

Pokud používáte Chrome, budete pravděpodobně vidět některé otázky týkající se překrytí při změně velikosti, způsobené kompozitními vrstvami Chrome. Bohužel, protože demo je celá obrazovka, doporučeno bude změna: transformace vlastnictví a. Transformace: Translatez (0) Hack to nepraví. Pokud však přepnete .klip na Poloha: pevná; funguje to.

 klip {
& amp;
& amp; :: předtím,
& amp; :: Po {
  Poloha: pevná;
}
}

Mějte na paměti, že chrom se snaží být užitečný, a toto řešení bude mít dopad na výkon. Ujistěte se, že výkon profilu, když děláte věci takhle ve výrobě.

05. Přidat přechody

Teď, když máme naši oříznutou text, pojďme ho přivést do života s některými přechody. Dobrou zprávou je, že můžete jednoduše přechod clip-cesta vlastnictví tak, aby prohlížeč provedl celou práci. Povolit přechody na pseudo-prvky a pak definovat čtyři různé stavy přechodu mezi.

Stav 1: Toto je počáteční stav, takže pojďme vytvořit tři další

Přidejte každý blok v dolní části CSS, jak jdete, takže můžete vidět, jak to vypadá.

Stav 2: Přesuňte trojúhelníky mírně, abyste odhalili pozadí

To bude vypadat trochu jako vlajka Konžské republiky. Odstranění 20% z špičky každého polygonu trojúhelník bude dělat trik.

Stav 3: Morph trojúhelníky do obdélníků

To je podobné francouzské trikolori, v opačném směru.

A co ten čtvrtý souřadný pár? To je místo, kde je to užitečné. Ukazuje se, že přechodný clip-cesta Pracuje pouze v případě, že použitá funkce tvaru je stejný (tak polygon & gt; polygon) a počet použitých bodů je stejný - prohlížeč přechodí každý jednotlivý bod. Proto máme ten čtvrtý skrytý bod - nám umožňuje bezproblémově přechod z trojúhelníku do obdélníku, prostě odhalíme, že čtvrtý bod, když to potřebujeme.

 .Clip {
& amp; :: před {
  Clip-Cesta: mnohoúhelník (0 0, 40% 0, 40% 100%, 0 100%);
}
& amp; :: Po {
  CLIP-CEST: mnohoúhelník (100% 0, 100% 100%, 60% 100%, 60% 0);
}
}

Stav 4: Otáčejte ty polygony

Lepení na naše téma vlajky, to by se podobalo 'I vyžadoval tug' ve světě signalizace námořní vlajky.

Zde jsme kroutili mnohoúhelníky, takže kříží ve středu a tvoří dva trojúhelníky. To je, když vám přechody mohou pomoci pochopit souřadné páry. Opravdu zpomalení přechodu, můžete vidět, jak každý bod se přesune přes obrazovku do nové pozice a začnete pochopit, jak uspořádání dvojic ovlivňuje přechod. Vlastně vám dává hodně kontroly nad přechodem.

 .Clip {
& amp; :: před {
  Clip-Cesta: mnohoúhelník (100% 0, 0 0, 100% 100%, 0 100%);
}
& amp; :: Po {
  Clip-Cesta: mnohoúhelník (100% 0, 100% 100%, 0 0, 0 100%);
}
}

Zabalit

Jsme všichni nastaveni, ale ještě nejsme schopni změnit státy, což znamená, že nemůžete vidět přechody v akci. Existuje mnoho způsobů, jak toho dosáhnout, takže je na vás. V repo a Codepen, použil jsem 100% řešení bez javascriptu s skrytými rádiovými tlačítky a ~ obecným výběrem sourozence - podívejte se. Můžete také zkontrolovat tento návod kódu tady .

Tento článek se původně objevil v otázce 298 z síť , Časopis pro profesionální web designéry a vývojáři - nabízet nejnovější nové webové trendy, technologie a techniky. Koupit problém 298 zde nebo Přihlásit se k odběru netto .

Speciální vánoční nabídka: Ušetříte až 47% na předplatném na síť Pro vás nebo přítele na Vánoce. Je to omezená nabídka, takže se pohybujte rychle ...

Související články:

28 Nesplacené příklady CSS
Jak vytvořit rozložení pyramidy s tvary CSS
CSS triky k revolucii vašich webových rozvržení

Jak vytvořit úžasné efekty s tvary CSS

01. Začněte html

02. Přidat nějaký styl

03. Nastavit pozadí a barvy

04. Připojte text

05. Přidat přechody

Zabalit

jak - Nejoblíbenější články

perieref: jak používat referenční nástroj pro obraz

8 Zlatá pravidla mobilního designu

Jak modelovat pojetí umění v kině 4d

Převést flash hry na HTML5

Jak vytvořit aplikaci Dashboard s reakcí

Jak spravovat CSS třídy s JavaScriptem

Jak malovat zombie v klipu studio barva

Jak pracovat s HTML Video

Kategorie