Koduleht » Kodeerimine » 15 ilus tekstiefektid loodud CSS-iga

    15 ilus tekstiefektid loodud CSS-iga

    Ilus tekst või tüpograafia muudab teie disaini atraktiivseks. Veebidisainis aitab CSS kujundada disaini, sealhulgas mitmesuguseid tekste või tüpograafiat. CSS-iga saate kasutada lõikamist ja lisada animatsioonile teksti, et asju asju veidi tõsta.

    Selle illustreerimiseks oleme kogunud 15 uimastavad ja jahedad tekstiefektid, mis on võimalikud CSS-iga (mõned vähesel määral Javascripti koodidest).

    Rohkem asju, mida saate CSS-iga teha, vaadake:

    • 18 lahedaid asju, mida sa ei usu CSS-i abil
    • 30 jQuery teksti efekti raamatukogud, mida pead teadma
    • Kuidas luua südame kuju CSS-iga
    • Animate.css - CSS3 raamatukogu animatsiooni hõlpsaks loomiseks

    Elastne insuldi animatsioon

    Yoksel elavdab jahedat värviskeemi kasutades tekste. See efekt tehakse CSS ja SVG abil. Tulemuseks on vinge!

    SVG Glitch

    Tahad teha efekte, mis näevad välja nagu murdunud analoogtelevisioon? Dirk Weber tegi selle uimastamise häire efekti kasutades CSS ja SVG filtrit.

    Shop Talk'i logo

    Shop Talk'i logo loovad Hugo uuesti, kasutades ainult CSS-i. Logo näeb välja sarnane originaaliga, koos õige tekstuuriga.

    Slashed Effect

    See Robet Messerle idee annab nuga viilutatud efekti, mis on tehtud vähem kui 70 rida CSS-i.

    Elegantne varjuefekt

    Long Shadow efekt tekib CSS-i abil. Looja, Juan Brujo tegi 4 muud mõju, kuid see on lihtsalt kõige muljetavaldavam.

    Udune tekstiefekt

    Andreas loob hämmastava kinematograafilise udu. Kohaldatav ainult Webkit brauserites.

    SVG teksti mask

    Marco Barria kujundusel on elegantne teksti varjamine suurele taustapildile.

    Teksti animatsioon

    Yoann lõi selle teksti animatsiooniga vinge mulje. Vaadake, kuidas kolm sõna vaheldub teise sõnaga.

    Tule põrandale

    See 3D-efekt, mida seeGuySam pakub, on lihtne mängida teksti varjudel, kuid see on fantastilise tulemusega.

    Taustapildi tekst

    Jintos mängis Webkit tausta klipi, et lisada teksti sees oleva taustapildi juurde. Selle meetodi abil tegi ta 16 lahedat loomingut.

    CSS Text-FX

    Moklik lisas tekstile heledat valgust, andes sulle vahelduva vilkumise, mis hoiatab kaugelt ohtudest.

    Animeeritud allkirja allkiri

    Gary Hepting lõi reaalajas allkirja animatsiooni. See toimib, kui soovid allkirjastamiseks kasutada Javascriptit SVG rajale.

    Värvikad Glitchy 404

    Kas te kuulete selle häire heli ja tunnete oma pea sees olevat vibratsiooni? Nii hea see häire on. mistic100, mis on tehtud CSS-iga pluss veidi Javascripti.

    Cosmos

    Nüüd on see elegantne ja inspireeriv logo. Samuti sobib see kasutamiseks “Cosmos”, sest orbiidid, saan seda?

    Laadimine

    Lahe laadimisefekt, mis on lihtsalt kirjade peitmine ja kuvamine.