15 lijepih tekstualnih efekata stvorenih pomoću CSS-a
Prekrasan tekst ili tipografija učinit će vaš dizajn atraktivnim. U web dizajnu, CSS pomaže u oblikovanju stila uključujući različite učinke u tekstu ili tipografiji. Pomoću CSS-a možete koristiti isječke i dodavati animacije u tekst kako biste nešto začinili.
I kako bismo to ilustrirali, prikupili smo 15 zapanjujućih i hladnih tekstualnih efekata koji su omogućeni pomoću CSS-a (neki s malom pomoći iz Javascript koda).
Za više stvari koje možete raditi s CSS-om, provjerite:
- 18 cool stvari koje ne vjerujete izgrađene su pomoću CSS-a
- 30 JQuery knjižnice s efektima teksta koje trebate znati
- Kako stvoriti oblik srca s CSS-om
- Animate.css - CSS3 knjižnica za jednostavno stvaranje animacije
Animacija elastičnog udara
Yoksel oživljava tekst teksta hladnom shemom boja. Taj je učinak učinjen pomoću CSS-a i SVG-a. Rezultat je strašan!
SVG Glitch
Želite napraviti efekte koji izgledaju kao slomljena analogna TV? Dirk Weber napravio je ovaj zadivljujući efekt glitch koristeći CSS i SVG filtar.
Logotip razgovora u trgovini
Logotip Shop Talk Hugo je upotrijebio samo pomoću CSS-a. Logotip izgleda sličan originalu, zajedno s odgovarajućom teksturom.
Urezani efekt
Ova ideja Robeta Messerlea daje efekt rezanja noža, učinjen s manje od 70 redaka CSS-a.
Elegantni učinak sjene
Long Shadow efekt dolazi do teksta, izrađen pomoću CSS-a. Tvorac, Juan Brujo napravio je 4 druga efekta, ali to je lako najimpresivnije.
Učinak maglovitog teksta
Andreas stvara nevjerojatan filmski magloviti efekt. Primjenjivo samo na Webkit preglednike.
SVG maska za tekst
Dizajn Marca Barrie pokazuje elegantan efekt maskiranja teksta na velikoj pozadinskoj slici.
Animacija teksta
Yoann je stvorio nevjerojatan efekat s ovom animacijom teksta. Pogledajte kako se druga riječ izmjenjuje između tri riječi.
Udari u pod
Ovaj 3D efekt od ThatGuySam je jednostavna igra na tekstualnim sjenama, ali s nevjerojatnim rezultatom.
Tekst u pozadini
Jintos se igrao s Webkit pozadinskim isječkom kako bi dodao pozadinsku sliku unutar teksta. S ovom metodom napravio je 16 sjajnih kreacija.
CSS Text-FX
Moklik je dodao prigušeni svjetlosni efekt tekstu, dajući vam povremene bljeskove koji upozoravaju na opasnost iz daljine.
Animirano potpisivanje potpisa
Gary Hepting je stvorio animaciju za potpisivanje u stvarnom vremenu. Ovo funkcionira primjenom Javascripta na SVG putanju za animiranje potpisivanja.
Šareni glitchy 404
Možete li čuti zvuk tog problema i osjetiti vibracije u vašoj glavi? Tako je dobar ovaj glitch efekt. mistic100 napravljen s CSS-om plus malo Javascript-a.
kosmos
Sada je to elegantan i inspirativan logotip. Također je pogodan za uporabu “kosmos”, jer orbite, uzmi ga?
Učitavam
Kul učinak učitavanja koji je jednostavno skrivanje i prikazivanje slova.
