Kotisivu » Coding » 15 Kauniit tekstitehosteet luotu CSS llä

    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.