15 Kauniit tekstitehosteet luotu CSS llä
Kaunis teksti tai typografia tekee suunnittelustasi viehättävän. Web-suunnittelussa CSS auttaa suunnittelemaan tyyliä, mukaan lukien erilaisia tekstin tai typografian vaikutuksia. CSS: n avulla voit käyttää leikkausta ja lisätä animaatiota tekstiin, jotta voit tuoda asioita hieman.
Tämän havainnollistamiseksi olemme keränneet 15 upeita ja viileitä tekstitehosteita, jotka ovat mahdollisia CSS: n kanssa (jotkut hieman apua Javascript-koodeista).
Saat lisää asioita, joita voit tehdä CSS: n kanssa:
- 18 hienoa asiaa, joita et usko CSS: n avulla
- 30 jQuery-tekstitehosteiden kirjastoja, jotka sinun täytyy tietää
- Miten luoda sydämen muoto CSS: llä
- Animate.css - CSS3-kirjasto luo animaatiota helposti
Elastinen aivohalvaus
Yoksel ansaitsee tekstin aivohalvauksen viileällä värimalmilla. Tämä vaikutus tehdään CSS: n ja SVG: n avulla. Tuloksena on mahtava!
SVG Glitch
Haluatko tehdä tehosteita, jotka näyttävät rikki analoginen TV? Dirk Weber teki tämän upean häiriön vaikutuksen käyttämällä CSS- ja SVG-suodattimia.
Shop Talk -logo
Hugo luo Shop Talk -logon vain CSS: n avulla. Logo näyttää samalta kuin alkuperäinen, ja siinä on oikea rakenne.
Slashed Effect
Tämä Robet Messerlen idea antaa veitsen leikattu vaikutus, joka on tehty alle 70 rivillä CSS: ää.
Tyylikäs varjoefekti
Pitkä varjo-vaikutus tulee tekstiin, joka on tehty CSS: n avulla. Luoja, Juan Brujo teki neljä muuta vaikutusta, mutta tämä on helposti vaikuttavin.
Sumuinen teksti
Andreas luo mahtavan elokuvallisen sumuisen vaikutuksen. Sovellettavissa vain Webkit-selaimissa.
SVG-tekstimaski
Marco Barrian suunnittelussa on tyylikäs tekstiä peittävä vaikutus suurelle taustakuvalle.
Tekstin animaatio
Yoann loi mahtavan ticker-vaikutuksen tämän tekstin animaation avulla. Katso, miten toinen sana vuorottelee kolmen sanan välillä.
Lyö lattiaa
Tämä ThisGuySamin 3D-efekti on yksinkertainen leikki teksti-varjoihin, mutta mahtava tulos.
Taustaklipsi
Jintos soitti Webkit-taustaleikkeen avulla lisäämällä tekstin taustakuvan. Tällä menetelmällä hän teki 16 viileää luomusta.
CSS-teksti-FX
Moklik lisäsi tekstiin himmennetyn valon vaikutuksen, mikä antaa sinulle ajoittaisia välähdyksiä, jotka varoittavat vaaroista kaukaa.
Allekirjoituksen animoitu allekirjoitus
Gary Hepting loi reaaliaikaisen allekirjoituksen animaation. Tämä toimii tekemällä Javascript SVG-polulle animoidaksesi allekirjoituksen.
Värikäs Glitchy 404
Voisitko kuulla tämän häiriön äänen ja tuntea värinän pään sisällä? Näin hyvä häiriö on. mistic100 tehty CSS: llä sekä hieman Javascriptiä.
maailmankaikkeus
Nyt tämä on tyylikäs ja inspiroiva logo. Se soveltuu myös käytettäväksi “maailmankaikkeus”, koska kiertää, hanki se?
Ladataan
Viileä lastausvaikutus, joka on yksinkertaisesti kirjainten piilottaminen ja näyttäminen.