15 lepih besedilnih učinkov, ustvarjenih s CSS

Lepo besedilo ali tipografija bo naredila vaš videz privlačen. V spletnem oblikovanju CSS pomaga oblikovati slog oblikovanja, vključno z različnimi učinki v besedilu ali tipografiji. Z uporabo CSS-ja lahko uporabite izrezovanje in dodajte animacijo v besedilo, da bi začutili malo stvari.

In za ponazoritev tega smo zbrali 15 osupljivih in kul besedilnih učinkov, ki jih omogoči CSS (nekateri z malo pomoči iz Javascript kod).

Za več stvari, ki jih lahko storite s CSS-jem, preverite:

• 18 kul stvari, ki jih ne boste verjeli, so bile zgrajene z uporabo CSS
• 30 JQuery knjižnice z učinkom besedila, ki jih morate vedeti
• Kako ustvariti obliko srca s CSS
• Animate.css - CSS3 knjižnica za enostavno ustvarjanje animacije

Animacija elastične poteze

Yoksel animira potezo besedila s hladno barvno shemo. Ta učinek je narejen s CSS in SVG. Rezultat je odličen!

SVG Glitch

Želite narediti učinke, ki so videti kot razbita analogna TV? Dirk Weber je naredil ta osupljiv učinek napake s pomočjo filtra CSS in SVG.

Logotip Talk Talk

Logotip Shop Talk je ustvaril Hugo samo s pomočjo CSS-ja. Logotip je podoben originalu, skupaj z ustrezno teksturo.

Urezan učinek

Ta ideja Robeta Messerleja daje učinek rezanja noža z manj kot 70 vrsticami CSS.

Eleganten učinek sence

Long Shadow učinek pride do besedila, narejenega s pomočjo CSS. Ustvarjalec, Juan Brujo je naredil štiri druge učinke, vendar je to enostavno najbolj impresivno.

Učinek meglenih besedil

Andreas ustvarja čudovit filmski megleni učinek. Velja samo za brskalnike Webkit.

Besedna maska ​​SVG

Oblikovanje Marca Barrie kaže eleganten učinek maskiranja besedila na veliki sliki ozadja.

Animacija besedila

Yoann je s to animacijo besedila ustvaril izjemen učinek. Pazi, kako se druga beseda izmenjuje med tremi besedami.

Udariti tla

Ta 3D učinek, ki ga je ustvaril ThatGuySam, je preprosta igra na senci besedila, vendar z izjemnim rezultatom.

Besedilo iz ozadja

Jintos se je igral z ozadjem Webkit, da bi dodal ozadje v besedilo. S to metodo je izdelal 16 kul stvaritev.

Besedilo CSS-FX

Moklik je besedilu dodal zatemnjen svetlobni učinek, ki vam je dal občasne utripe, ki opozarjajo na nevarnost od daleč.

Animirani podpis podpisa

Gary Hepting je ustvaril animacijo za podpisovanje v realnem času. To deluje tako, da Javascript uporabite za pot SVG za animacijo podpisa.

Barvita glitchy 404

Ali lahko slišite zvok te napake in občutite vibracije v vaši glavi? Tako dober je ta učinek. mistic100 izdelan s programom CSS in delom Javascripta.

Kozmos

Zdaj je to eleganten in navdihujoč logotip. Primerna je tudi za uporabo “Kozmos”, ker orbite, dobite?

nalaganje

Kul učinek nalaganja, ki je preprosto skrivanje in prikazovanje črk.