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.