116 Siistiä CSS-tekstitehoste-esimerkkiä, jotka voit ladata

Saa 300+ ilmaislähetystä postilaatikkoosi!

Tilaa uutiskirjeemme ja vastaanota 300+ muotoilun resurssia ensimmäisten 5 minuutin aikana, jonka aikana olet tilaaja. Voit tehdä suunnittelustasi houkuttelevan näköisen vain muutamalla yksinkertaisella CSS-tempulla.

Websisuunnittelussa CSS auttaa sinua saamaan aikaan monia erilaisia fontti-efektejä, mukaan lukien sellaisten efektien kuten animaation ja rajauksen käyttäminen asioiden maustamiseen.

Voidaksemme havainnollistaa tätä lisää olemme koonneet listan efekteistä, jotka ovat visuaalisesti upeita ja kauniita, ja jotka kaikki ovat mahdollisia CSS:n avulla, ja jotkut niistä myös hieman Javascriptin avulla.

Sisällysluettelo

• Animoidut CSS-tekstitehosteet
• CSS-varjostustekstitehosteet
• 3D-CSS-tekstitehosteet
• CSS-tekstin tausta
• CSS-tekstitehosteet leijailevasta tekstistä
• CSS-tekstitehosteet välkkyvästä tekstistä

.

• Cool CSS tekstitehosteet

CSS animoidut tekstitehosteet

Tekstianimaatio

Kakkosena näistä CSS-tekstitehosteista on Yoann Helin. Hän loi CSS:llä tämän efektin, jonka olet ehkä nähnyt monilla portfolio- ja esittelysivustoilla.

Viivateksti.

Animoitu teksti HTML:llä, CSS:llä ja JavaScriptillä.

COSMOS

Vaikka tämä CSS-tekstitehoste ei ole kaikkein käyttökelpoisin, se on silti vaikuttava.

Tässä on, mitä tekijä käytti:

• vw, vh, vmin-yksiköt reagointikykyä varten
• flexbox kaiken keskittämiseksi
• moninkertaiset box-varjot tähdille
• keyframes-animaatio planeetoille
• transform planeettojen pyörittämiseksi

Animoitu ”teksti-shadow”-kuvio

Käyttää -webkit-background-clip: text & lineaarista gradienttia simuloidakseen raidallista tekstivarjostusta.

SVG Path animated Text

Animoi teksti ”Design” yhden SVG-polun perusteella. Click toggle animation.

Animated text fill with svg text practice

Animated text fill with HTML(Pug), CSS(SCSS) and SVG.

Animoitu teksti Snapsvg:llä

Työskentely tämän kanssa tuntuu vanhalta hyvältä Flash 🙂

Vertikaalisesti pyörivä teksti css w/ browser prefixes

Vertikaalisesti pyörivä teksti HTML:n ja CSS:n avulla.

Pyörivä teksti

HTML:n, CSS:n ja JavaScriptin avulla pyörivä teksti.

#Codevember 3D Quote Rotator

Käyttämällä GreenSockia ja SplitText-liitännäistä 3D-tekstitehosteen luomiseen.

Impossibly Tipsy

Interessantti efekti tekstille.

Sumuinen tekstitehoste

Kinoimainen intro-tekstitehoste (vain Webkit-ohjelmassa – tekstin naamioitu naamioitu tekstinäyttö). Tämä on kokeellinen, mutta oli silti pakko sisällyttää näiden CSS-efektien joukkoon.

webdev-sarja – Värikäs teksti-animaatio #päivitetty

Jouheva ja konfiguroitavissa oleva, SCSS:llä tehty värikäs teksti-animaatiomoduuli.

CSS Tekstin täyttäminen vedellä

Seuraavana näistä CSS-tekstitehosteista on tekstin täyttäminen vedellä-animaatio, preloadereihin ja vastaaviin.

GSAP-teksti-animaatio

Tekstitehoste Greensockin avulla.

Aaltotekstitehoste (SVG/blend-tilalla)

Aaltotekstitehoste HTML:n ja CSS:n avulla.

Shattering Text Animation

GSAP-tekstianimaatio. SVG-polun särkyminen. Slow motion on hover.

Squiggly Text

Squiggly text kokeilu SVG-filttereillä.

Animated Headlines

Kokoelma animoituja otsikoita, joissa vaihdettavat sanat korvaavat toisiaan CSS-siirtymien avulla.

Text Animation: Montserrat

HTML- ja CSS-teksti-animaatio.

Shaded Text

Shaded text, SVG + CSS3-kokeilu animoiduista varjoista. Sitä ei ole optimoitu mobiililaitteille… vielä.

Animoiva SVG-teksti

HTML-, CSS- ja SVG-animoiva teksti.

tekstin värin piirtäminen

Tekstin polun piirtäminen greensockin drawSVG-pluginilla.

Puhtaat CSS-teksti-animaatiot

HTML:n ja CSS:n tekstin animaatio.

Animoitu tekstitäyttö

Täytä tekstisi animoidulla taustakuvalla – ei tarvita JavaScriptiä.

Kupliva tekstitehoste

JQuery-käyttöinen esimerkki siitä, miten voit luoda kuplivan tehosteen HTML-otsikkoon. Kuplat näyttävät siltä kuin ne tulisivat tekstin takaa, ja sitten ne häipyvät ja poistetaan.

Smoky Text

Tekstivarjostuksen ja CSS-transformaatioiden (erityisesti vinouden) yhdistäminen savuisen (tai savuisen?) efektin aikaansaamiseksi.

jquery break/animate warping text paragraph example

HTML-, CSS- ja JavaScript-break/animate warping text paragraph example.

Animated wave clipped by text

Animated wave inside text with svg. Kuva taustalla ja gradientti täyttää aallon.

(siisti) tekstitehoste

Animoitu teksti GIF-kuvan kanssa.

Untitled

Animoitu teksti HTML:llä, CSS:llä ja JS:llä.

Halkaistun tekstin paljastaminen

HTML, CSS ja JavaScript halkaistun tekstin paljastaminen.

Sipulin nylkevä tekstimorfointi

Sipulin nylkevä tekstimorfointi HTML/CSS/JS:ssä.

Text-Shadow Animate

Text-Shadow animate with HTML and CSS.

SVG-videonaamio tekstin päällä

SVG-videonaamio tekstin päällä.

GSAP-tekstipaljastuksen animaatio

GSAP-tekstinpaljastuksen animointi.

SVG-teksti-animaatio

Kiva SVG-teksti-animaatio.

CSS Only Random Text Transform (Animated)

Generoi satunnaista tekstimuunnosta vain CSS:n avulla.

Silent Movie Text Effect

Movie-tekstitehoste canvas:llä.

CSS-TEKSTIN PALJASTELUANIMAATIO

Puhdas CSS-tekstin paljastava animaatio.

Kirjainanimaatio

Kirjainten animointi CSS:llä.

Tekstiviiva-animaatio

Nätti tekstiviiva-animaatio TweenMax.js:llä.

Helo!

Klikkaamalla piirtäisit tekstin uudelleen! Spritejen liittäminen tekstiin on aina hauskaa.

CSS only Frozen text

CSS only frozen text -efekti, jossa on background-clip, sekoitustiloja ja gradienttiteksti.

Kirjain-efekti

Kirjain-efekti vierittämällä.

Masking Path Animation

Joskus yksinkertainen on yhtä tehokas kuin monimutkainen.

Käsikirjoitusanimaatio (SVG + CSS)

SVG- ja CSS-käsikirjoitusanimaatio. SVG:n optimoimiseksi animaatiota varten grafiikka pilkottiin pienempiin osiin. Tämä tehtiin ensisijaisesti, jotta vältettäisiin polkuelementtien päällekkäisyys toisiinsa liittymättömien clipPath-elementtien kanssa, mutta se mahdollisti myös animaation hienomman hallinnan. Kaikki animoidut polkuelementit vietiin Adobe Illustratorista ja hienosäädettiin koodilla.

Animated Text Gradient

Nättiä animoitua tekstiä gradientin kanssa.

CSS Shadow tekstitehosteet

CSS Dashed Shadow

Puhtaasti css hipster-henkinen typografinen katkoviivoitettu varjo.

Hit The Floor tekstitehoste

CSS3-tekstivarjotehosteet

HTML:llä ja CSS3:lla toteutettu tekstivarjotehoste.

Long Shadow Gradient Mixin

Sass (Scss) Mixin pitkien varjostusgradienttien nopeaan tuottamiseen. Sopii sekä ’text-shadow’lle että ’box-shadow’lle.

CSS Text Shadow

Taivutetaan Lynda.comin opetusohjelmaan. CSS: Advanced Typographic Techniques using lettering.js

Text-Shadow

HTML- ja CSS-tekstivarjostin.

Awesome Text-Shadow

Awesome text-shadow with CSS3.

Shadow Parallax – Reactjs

Liikuta hiirtä ja leiki sanoja. Kirjoittanut React, ES6, Babel transpiler.

Neon text-shadow-efekti

9 neon CSStext-shadow -efektiä.

Tekstin tyylittely SVG:llä (toinen varjo)

Tekstin tyylittely SVG:llä.

Nätti varjo

Nätti varjo HTML:llä ja CSS:llä.

Tekstivarjo

Puhdas CSS-tekstivarjo.

Fancy tekstivarjo

Fancy tekstivarjo.

Groovy CSS-efekti

1960-luvun fontti-efekti käyttäen CSS text-shadow -ominaisuutta sekä SASS-funktiota ja mixinejä koodin DRY pitämiseksi.

3D CSS-tekstitehosteet

3d-tekstitehoste – mousemove

Näppärä 3D-tekstitehoste, jossa käytetään jQueryn mousemovea.

3D-puristusteksti-efekti- vain CSS

HTML ja CSS 3D-puristusteksti-efekti.

CSS Text Stroke | CSS Text Border – Infinite effect only with #CSS #html5

Vaihda tekstiä nähdäksesi animaation uudelleen. Leikittelen vain eri CSS-ominaisuuksilla luodakseni hauskoja tekstitehosteita.

Vain SS: Tekstiaalto

Vain CSS-teksti-aalto.

Skewed and Rotated Text

Teksti CSS:llä skew() ja rotate().

3d text marquee effects

3D text marquee effects.

CSS-tekstitausta

-webkit-background-clip:text CSS-efekti

Käytä -webkit-background-clip:text ja -webkit-fill-text-color : transparent -tekstitaustan käyttämiseen tekstin taustan käyttämiseen webkit-selaimessa.

Aseta värin fallback muille selaimille.

Taustan leikkaaminen

Tekstin taustan leikkaaminen.

SVG Knockout Text with Video Background

Tässä demossa tutustutaan knockout-tekstin/-polkujen luomiseen SVG:ssä ja YouTube-videon silmukoimiseen täytteenä.

SVG-tekstimaski

Gooey-tekstitausta SVG-suodattimilla

Näyte siitä, kuinka gooey-s SVG-suodattimella luodaan sileät reunat riviin sijoitetun tekstin ympärille, jolla on tausta.

Liikkuva pilviteksti | HTML + CSS

Liikkuva pilviteksti HTML:n ja CSS:n avulla.

CSS-yritykset tekstiä inline vinolla taustalla

Vinouden käyttäminen renderöidään vain, jos kohde on display: block tai inline-block. Jotkin näistä näyttävät samalta leveässä näkymäikkunassa, mutta epäonnistuvat eri tavalla, kun näkymäikkunan leveyttä pienennetään.

CSS hover-tekstitehosteet

Avattava tyyppi

Efek Typografia Teksti Neon osa 1

Tekstisuunnittelu (typografia) neon-efektillä.

Text-mask background moving on MouseMove – v2

Kokeillaan uutta ominaisuutta ”background-clip: text”, jossa tausta liikkuu.

Peeled Text Transforms

Tässä kynässä näkyy tekstiä, joka näyttää siltä kuin se olisi kuorittu sivulta. Siinä on sulava animaatio, kun sitä liikutetaan hiirellä.

Happy Text

HTML- ja CSS-verkkokielellä toteutettu onnellinen tekstiefekti.

Animoitu korostettu teksti

Ajatus on yksinkertainen, se käyttää lineaarista gradienttia ja siirtymää.

3d-hover-teksti-efekti

HTML, CSS ja JavaScript 3d hover-teksti-efekti.

CSS Perspective Text Hover

Kokeilu, jossa käytetään webfontteja yhdessä CSS:n 3D-muunnostyökalujen kanssa.

Focus-text-hover-efekti | HTML+ CSS + jQuery

Hover-CSS-efekti tekstille.

Animoituja alleviivauksia

Demo animoidusta alleviivaustehosteesta. Puhdas CSS-animaatio.

Miten saan mukautetun värillisen alleviivauksen, joka ulottuu useamman rivin yli?

Miten saan mukautetun värillisen alleviivauksen?

Miten saan mukautetun värillisen alleviivauksen?

How-do-I-get-a-custom-col_- 116 Siistejä CSS-tekstitehosteita Esimerkkejä, jotka voit ladata

Näppärä alleviivauksen leijutusefekti.

Simple CSS Hover Effect using Sass Loops

Simple little hover animation. Sass-silmukoiden avulla huikeat animaatioviiveet on todella helppo tehdä…niistä saa paljon irti.

Spring Text Hover Effect

Leikittelin juuri efekteillä nappeja varten ja ajattelin, että tämä on aika siisti.

Sekoitetut tekstikerrokset

Sisältö luotu JS:llä.

CSS glitch-teksti

Värikäs glitch-teksti 404

CSS glitch-tekstiä skew:llä

HTML ja CSS glitched text by skew.

CSS-only-glitch-efekti

Glitch-tyyppinen efekti CSS-animaatiolla.

Glitch

Tekstin glitchaaminen HTML:llä ja CSS:llä.

Glitchy Text

Glitchy-teksti HTML:llä ja CSS:llä(SCSS).

Glitch-teksti

HTML(Pug) ja CSS(SCSS) glitch-teksti.

Glitched Text (tutkimus The Verge)

HTML-, CSS- ja JavaScript-glitch-teksti.

SVG Glitch

VHS-teksti

VHS-tekstiä HTML:llä, CSS:llä ja JavaScriptillä.

Psycho Glitch (CSS-muuttujat & @keyframes)

”Glitch”-efekti, joka on luotu uudelleen animoitujen CSS:n mukautettujen ominaisuuksien avulla. Pure CSS.

Simple text glitch

Pure CSS simple text glitch.

Viileät CSS-tekstitehosteet

Slashed CSS Effect

Elastinen aivohalvaus CSS + SVG

Ensimmäisenä näistä siisteistä CSS-tekstitehoste-esimerkkeistä on tullut Yoksel. Hän valitsi hämmästyttävän värimaailman tähän kauniiseen CSS-tekstianimaatioon.

SVG Text: Animated Typing

HTML-, CSS- ja SVG-animoitu kirjoitus.

Tekstin kirjoittaminen thingamy

HTML-, CSS- ja JavaScript-tekstin kirjoittaminen thingamy.

Futuristinen Resolving/Typing-tekstitehoste feat. GLaDOS

Futuristinen resolving/typing tekstitehoste, jota tavallisesti esiintyy pelien tai elokuvien leikkauskohtauksissa, jotka paljastavat tekstiä ruudulla.

Transmission: Hehkuva teksti-animaatio

Hieman hehkuva teksti-animaatio. Ensin hieman JS:ää, jolla jokainen kirjain kiedotaan spaniin. Sitten keyframe-animaatio, jossa on animation-delay mixin, sytyttää jokaisen kirjaimen peräkkäin.

Text Scramble Effect

Pieni tekstin dekoodaus/scramble-efekti.

Kinetic Type with Greensock

Kinetic Type HTML:llä, CSS:llä ja JavaScriptillä (Greensock).

LOVE-tekstitehoste

Scrambled-tekstitehoste, joka on saanut inspiraationsa palkitusta scifi-elokuvasta ”LOVE”.

Auto-kirjoitusteksti (toiminto)

Auto-kirjoitusteksti HTML:llä, CSS:llä ja JavaScriptillä.

Kirjoitusteksti

HTML:llä, CSS:llä ja JavaScriptillä kirjoitettua tekstiä.

Kirjoitusteksti-efekti

Kirjoitusteksti-efekti tekstin kirjoittamiselle, joka on tehty yksinkertaisella JQueryn toiminnolla. Kutsu funktiota yksinkertaisesti siten, että ensimmäisenä argumenttina on elementti, jota haluat animoida, ja toisena argumenttina animaation nopeus.

Jos pidit tästä artikkelista CSS-tekstitehosteilla, kannattaa tutustua myös näihin artikkeleihin:

• CSS- ja Javascript-animaatiokirjastot, joilla voit luoda mahtavia efektejä
• CSS-slideshow-esimerkkejä, joita voit käyttää verkkosivuillasi
• Joitakin suosituimpia CSS-kirjastoja, jotka löytyvät Githubista