Početna » šifriranje » 15 lijepih tekstualnih efekata stvorenih pomoću CSS-a

    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.