15 Smukke Teksteffekter Opret med CSS
Smuk tekst eller typografi gør dit design ser attraktivt ud. I webdesign hjælper CSS med at give stil til design, herunder forskellige effekter i tekst eller typografi. Med CSS kan du bruge klipning og tilføje animation til tekst for at krydre tingene lidt op.
Og for at illustrere dette har vi samlet 15 fantastiske og seje teksteffekter, der gøres mulige med CSS (nogle med lidt hjælp fra Javascript-koder).
For flere ting, du kan gøre med CSS, tjek:
- 18 kølige ting, du ikke tror, blev bygget ved hjælp af CSS
- 30 jQuery tekst effektbiblioteker du skal vide
- Sådan skaber du hjerteform med CSS
- Animate.css - CSS3 bibliotek for nemt at skabe animation
Elastisk slagtilfælde Animation
Yoksel animerer strebet af teksten med et køligt farveskema. Denne effekt er lavet med CSS og SVG. Resultatet er fantastisk!
SVG Glitch
Vil du lave effekter, der ligner et brudt analogt tv? Dirk Weber lavede denne fantastiske glitch effekt ved hjælp af CSS og SVG filter.
Shop Talk logo
Shop Talk-logoet genskabes af Hugo kun ved hjælp af CSS. Logoet ligner originalen, komplet med den rigtige tekstur.
Slashed Effect
Denne idé af Robet Messerle giver kniven skåret effekt, lavet med mindre end 70 linjer af CSS.
Elegant Shadow Effect
Langskyggeffekten kommer til tekst, lavet ved hjælp af CSS. Skaberen Juan Brujo lavede 4 andre effekter, men det er let det mest imponerende.
Tåget tekst effekt
Andreas skaber en fantastisk filmisk tågeteffekt. Gælder kun for webkit browsere.
SVG-tekstmaske
Et design af Marco Barria viser en elegant tekstmaskerende effekt på et stort baggrundsbillede.
Tekst Animation
Yoann skabte en fantastisk ticker-effekt med denne tekst animation. Se hvordan det andet ord veksler mellem tre ord.
Ram gulvet
Denne 3D-effekt af ThatGuySam er et simpelt spil på tekstskygger, men med et fantastisk resultat.
Baggrundsskærmtekst
Jintos spillede rundt med et Webkit baggrundsblip for at tilføje et baggrundsbilde indenfor tekst. Han lavede 16 kølige kreationer ved hjælp af denne metode.
CSS Text-FX
Moklik tilføjede dæmpet lyseffekt til teksten, hvilket giver dig intermitterende blink, der advarer om fare langtfra.
Animeret underskrift af underskrift
Gary Hepting skabte en real-time signerings animation. Dette virker ved at anvende Javascript til SVG-banen for at animere signaturen.
Farverig Glitchy 404
Kan du høre lyden af denne fejl og føle vibrationen, inde i dit hoved? Det er så godt, at denne glitcheffekt er. mistic100 lavet med CSS plus en smule Javascript.
Cosmos
Nu er dette et elegant og inspirerende logo. Det er også egnet til brug for “Cosmos”, fordi kredsløb, få det?
Indlæser
En cool loading effekt, der simpelthen skjuler og viser bogstaver.