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.