116 Cool CSS Text Effects Examples That You Can Download

Advertisement

Web typografie is een groot ding dat drastisch is veranderd met CSS3. U kunt uw ontwerp er aantrekkelijk uit laten zien met slechts een paar eenvoudige CSS-trucs.

Wanneer het op webdesign aankomt, helpt CSS u om veel verschillende lettertype-effecten te verkrijgen, inclusief het gebruik van effecten zoals animatie en clipping om de dingen een beetje op te fleuren.

Om dit verder te helpen illustreren, hebben we een lijst samengesteld van effecten die visueel verbluffend en mooi zijn, die allemaal mogelijk zijn gemaakt door CSS, en sommige van hen ook met een beetje Javascript.

Inhoudsopgave

• Geanimeerde CSS tekst effecten
• CSS schaduw tekst effecten
• 3D CSS tekst effecten
• CSS tekst achtergrond
• CSS hover tekst effecten
• CSS glitch tekst effecten
• Coole CSS tekst effecten

CSS geanimeerde tekst effecten

Tekst animatie

De tweede van deze CSS tekst effecten is van Yoann Helin. Hij maakte in CSS dit effect dat je misschien al op veel portfolio- en presentatiewebsites hebt gezien.

Lijn-tekst.

Geanimeerde tekst met HTML, CSS en JavaScript.

COSMOS

Weliswaar is dit CSS teksteffect niet het meest bruikbare, maar het is toch indrukwekkend.

Hier ziet u wat de auteur heeft gebruikt:

• vw, vh, vmin eenheden voor responsiviteit
• flexbox om alles te centreren
• meervoudige box-shadows voor de sterren
• keyframes animatie voor de planeten
• transform om de planeten te roteren

Geanimeerde “tekst-shadow”-patroon

Gebruikt -webkit-background-clip: text & lineair-gradiënt om gestreepte tekstschaduw te simuleren.

Aantekening

Geanimeerde ondertekening van handtekening (SVG-paden)

Gebruik deze pen om het schrijven van een handtekening te animeren met SVG stroke-dashoffset/stroke-dasharray en CSS overgangen.

SVG-pad geanimeerde tekst

De tekst “Ontwerp” is geanimeerd op basis van een SVG-pad. Klik om de animatie te starten.

Geanimeerde tekstvulling met svg-tekstpraktijk

Geanimeerde tekstvulling met HTML(Pug), CSS(SCSS) en SVG.

Geanimeerde tekst met Snapsvg

Werken met dit voelt aan als een oude goede Flash 🙂

Verticaal draaiende tekst css met browser voorvoegsels

Verticaal draaiende tekst met HTML en CSS.

Roterende tekst

HTML, CSS en JavaScript roterende tekst.

#Codevember 3D Quote Rotator

Gebruik GreenSock en de SplitText plugin om een 3D-teksteffect te maken.

Impossibly Tipsy

Interessant effect voor tekst.

Foggy text effect

Cinematic intro text effect (alleen Webkit – tekstmasker). Dit is experimenteel, maar moest toch worden opgenomen onder deze CSS effecten.

webdev-serie – Kleurrijke tekst animatie #updated

Vloeibare en configureerbare kleurrijke tekst animatie module gemaakt met SCSS.

CSS Tekst vulling met water

De volgende van deze CSS tekst effecten is een tekst vulling met water animatie, voor preloaders en dergelijke.

GSAP Text Animation

Tekst effect met behulp van Greensock.

Golf tekst effect (met SVG/blend mode)

Golf tekst effect met HTML en CSS.

Splinterende tekst-animatie

GSAP-tekstanimatie. SVG-pad verbrijzelt. Langzame beweging bij hover.

Squiggly Text

Squiggly tekst experiment met SVG filters.

Geanimeerde krantenkoppen

Een verzameling geanimeerde krantenkoppen, met verwisselbare woorden die elkaar vervangen via CSS-overgangen.

Tekstanimatie: Montserrat

HTML en CSS tekst animatie.

Shaded Text

Shaded text, een SVG + CSS3 experiment over geanimeerde schaduwen. Het is niet geoptimaliseerd voor mobiele apparaten… nog niet.

Animating SVG text

HTML, CSS en SVG animating text.

tekstkleur tekenen

Pad tekenen van tekst met behulp van greensock’s drawSVG plugin.

zuivere CSS-tekstanimatie

HTML en CSS-tekst animatie.

Geanimeerde tekstvulling

Vul je tekst met geanimeerde achtergrondafbeeldingen – geen JavaScript nodig.

Bubbelende tekst

Een jQuery-gestuurd voorbeeld van hoe u een bubbelend effect kunt maken op een HTML-kop. De bubbels lijken van achter de tekst te komen, en vervagen dan en worden verwijderd.

Smoky Text

Het combineren van tekstschaduw en CSS transformaties (vooral skew) voor een smoky (of smokey?) effect.

jquery break/animate warping text paragraph example

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

Geanimeerde golf geclipt door tekst

Geanimeerde golf binnen tekst met svg. Afbeelding op de achtergrond en verloop dat de golf vult.

(cool) tekst effect

Geanimeerde tekst met GIF afbeelding.

Ongetiteld

Geanimeerde tekst met HTML, CSS en JS.

Gesplitste tekst onthullen

HTML, CSS en JavaScript gesplitste tekst onthullen.

Ui villen tekst morphen

Ui villen-tekst morphen in HTML/CSS/JS.

Tekst-schaduw animeren

tekst-schaduw animeren met HTML en CSS.

SVG-videomasker op tekst

SVG-videomasker op tekst.

GSAP-tekst onthul-animatie

GSAP-tekst onthul-animatie.

SVG-tekst onthul-animatie

Mooie SVG-tekst animatie.

CSS-only willekeurige teksttransformatie (geanimeerd)

Genereer willekeurige teksttransformatie met alleen CSS.

Silent Movie Text Effect

Movie teksteffect met canvas.

CSS TEKST-VERSCHIJNENDE ANIMATIE

Pure CSS tekst onthullende animatie.

Letter-animatie

Animatie van letters met CSS.

Text Line Animation

Mooie text line animation met TweenMax.js.

Helo!

Klik om opnieuw te tekenen! Sprites in tekst omzetten is altijd leuk.

CSS-only-bevroren tekst

CSS-only-bevroren-tekst effect met background-clip, overvloeimodi en verlopende tekst.

letters effect

Letters effect op scrollen.

Masking Path Animation

Soms is simpel net zo effectief als complex.

Handschrift animatie (SVG + CSS)

SVG en CSS handschrift animatie. Om de SVG te optimaliseren voor animatie, is de afbeelding in kleinere stukjes gehakt. Dit is in de eerste plaats gedaan om te voorkomen dat padelementen overlappen met niet-gerelateerde clipPath-elementen, maar ook om fijnere controle over de animatie mogelijk te maken. Alle geanimeerde pad-elementen werden geëxporteerd uit Adobe Illustrator en verfijnd met code.

Geanimeerde tekst gradient

Mooie geanimeerde tekst met gradient.

CSS schaduw tekst effecten

CSS gestreepte schaduw

Pure css hipster-achtige typografische gestreepte schaduw.

Hit The Floor Tekst Effect

CSS3 tekst-schaduw effecten

HTML en CSS3 tekst-schaduw effecten.

Long-Shadow-Gradient Mixin

Een Sass (Scss) Mixin om snel long-shadow gradients te genereren. Geschikt voor zowel ’text-shadow’ als ‘box-shadow’.

CSS Text Shadow

Het proberen van een Lynda.com tutorial. CSS: Geavanceerde typografische technieken met behulp van lettering.js

Text-Shadow

HTML en CSS-tekstschaduw.

Awesome Text-Shadow

Awesome text-shadow met CSS3.

Schaduw Parallax – Reactjs

Beweeg je muis en speel woorden. Geschreven door React, ES6, Babel transpiler.

Neon text-shadow effect

9 neon CSStext-shadow effecten.

Teksttypen met SVG (tweede schaduw)

Teksttypen met SVG.

Pretty shadow

Pretty shadow met HTML en CSS.

Tekst-schaduw

Pure CSS-tekst-schaduw.

Fancy-tekst-schaduw

Fancy-tekst-schaduw.

Groovy CSS Effect

1960’s lettertype effect met behulp van CSS text-shadow eigenschap samen met SASS functie en mixins om code DRY te houden.

3D CSS tekst effecten

3d Tekst effect – mousemove

Mooi 3D tekst effect met jQuery mousemove.

3D extrudeer tekst effect- alleen CSS

HTML en CSS 3D extrudeer tekst effect.

CSS Text Stroke | CSS Text Border – Oneindig effect alleen met #CSS #html5

Verander de tekst om de animatie weer te zien.

3D CSS Typografie

Een element, meerkleurig 3d tekst effect

Een enkel element met meerkleurige tekst en 3D tekst schaduw effecten. Gewoon wat spelen met verschillende CSS eigenschappen om leuke tekst effecten te maken.

Only SS: Text Wave

Only CSS text wave.

Gekantelde en gedraaide tekst

Tekst met CSS skew() en rotate().

3d-tekstmarquee-effecten

3d-tekstmarquee-effecten.

CSS tekst achtergrond

-webkit-background-clip:text CSS effect

Gebruik -webkit-background-clip: text en -webkit-fill-text-color : transparent om een achtergrond toe te passen op een tekst in webkit browser.

Stel een kleur fallback in voor andere browsers.

Achtergrond clipping

Tekst achtergrond clipping.

SVG Knockout-tekst met video-achtergrond

Deze demo laat zien hoe je knockout-tekst/-paden in SVG kunt maken en een YouTube-video als vulling kunt gebruiken.

SVG-tekstmasker

Gooey-tekstachtergrond met SVG-filters

Een voorbeeld van het gebruik van een gooey SVG-filter om vloeiende randen te maken rond inline tekst met een achtergrond.

Verplaatsen van wolkentekst | HTML + CSS

Verplaatsen van wolkentekst met HTML en CSS.

CSS-pogingen tot tekst met inline scheve achtergrond

Het gebruik van scheefheid wordt alleen weergegeven als het item display: block of inline-block is. Sommige hiervan zien er hetzelfde uit op een brede viewport, maar werken anders als de viewport-breedte wordt verkleind.

CSS hover tekst effecten

Openingstype

Efek Typography Text Neon part 1

Tekst ontwerp (typografie) met neon effect.

Tekst-masker achtergrond bewegend op MouseMove – v2

De nieuwe functie “achtergrond-clip: tekst” uitproberen, met achtergrond bewegend.

Peeled-Text-Transforms

Deze pen laat tekst zien die van de pagina lijkt te zijn gepeld. Het heeft een vloeiende animatie als je er met de muis overheen gaat.

Happy Text

HTML en CSS happy text effect.

Geanimeerde uitgelichte tekst

Het idee is eenvoudig, het maakt gebruik van lineaire gradiënt en overgang.

3d hover-teksteffect

HTML, CSS en JavaScript 3d hover-teksteffect.

CSS Perspective Text Hover

Een experiment met webfonts in combinatie met CSS 3D-transformatiegereedschappen.

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

Hover CSS effect voor tekst.

Geanimeerde onderlijnen

Demo van een geanimeerd onderstrepingseffect. Pure CSS animatie.

Hoe krijg ik een aangepaste gekleurde onderstreping die meerdere regels omspant?

Mooi onderstreping hover effect.

Eenvoudig CSS Hover Effect met behulp van Sass Loops

Eenvoudige kleine hover animatie. Met Sass-lussen is het heel eenvoudig om animatievertragingen te maken… je kunt er veel mee doen.

Spring Text Hover Effect

Ben net aan het spelen met effecten voor knoppen en vond dit wel cool.

Gemengde tekstlagen

Inhoud gegenereerd met JS.

CSS glitch text

Colorful Glitchy 404

CSS glitched-text by skew

HTML en CSS glitched-text by skew.

CSS-only-glitch-effect

Glitch soort effect met CSS animatie.

Glitch

Glitch tekst met HTML en CSS.

Glitchy Text

Glitchy tekst met HTML en CSS(SCSS).

Glitch tekst

HTML(Pug) en CSS(SCSS) glitch tekst.

Glitched Text (studie van The Verge)

HTML, CSS en JavaScript glitched tekst.

SVG Glitch

VHS tekst

VHS tekst met HTML, CSS en JavaScript.

Psycho-glitch (CSS-variabelen & @keyframes)

Het “glitch”-effect, herschapen met geanimeerde aangepaste CSS-eigenschappen. Pure CSS.

Eenvoudige tekst glitch

Eenvoudige CSS-tekst glitch.

Coole CSS tekst effecten

Slashed CSS Effect

Elastic stroke CSS + SVG

De eerste van deze coole CSS tekst effecten komt van Yoksel. Ze koos een geweldig kleurenschema voor deze mooie CSS tekst animatie.

SVG Tekst: Animated Typing

HTML, CSS en SVG geanimeerd typen.

Tekst typen thingamy

HTML, CSS en JavaScript tekst typen thingamy.

Futuristisch Oplossen/Typen Tekst Effect feat. GLaDOS

Futuristic resolving/typing text effect meestal te vinden in game of film cut scenes om tekst te onthullen op het scherm.

Transmission: Glowing Text Animation

Een beetje glowing tekst animatie. Eerst wat JS om elke letter in een spanwijdte te wikkelen. Dan een keyframe-animatie, met animatie-delay mixin, die elke letter na elkaar oplicht.

Text Scramble Effect

Een klein tekstdecodeer/scramble-effect.

Kinetisch Type met Greensock

Kinetisch Type met HTML, CSS en JavaScript (Greensock).

LOVE Text Effect

Gescrambeld teksteffect geïnspireerd op de bekroonde sciencefictionfilm “LOVE”.

Automatisch typen van tekst (functie)

Automatisch typen van tekst met HTML, CSS en JavaScript.

Typing Text

HTML, CSS en JavaScript getypte tekst.

Typing Effect

Typing-effect voor tekst gemaakt met een eenvoudige JQuery-functie. Roep de functie gewoon op met het element dat je wilt animeren als eerste argument en de animatiesnelheid als tweede argument.

Als je dit artikel met CSS tekst effecten leuk vond, moet je ook eens kijken naar deze artikelen:

• CSS en Javascript Animation Libraries To Create Awesome Effects
• CSS slideshow voorbeelden die je kunt gebruiken in je websites
• Some Of The Most Popular CSS Libraries That Are On Github