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.