116 Příkladů skvělých textových efektů CSS, které si můžete stáhnout

Přišli jste si sem pro opravdu skvělé textové efekty CSS, které vám pomohou vytvořit úžasnou webovou typografii pro vaše webové stránky.

S cílem úspěšně dodat webovým stránkám vizuálně působivější vzhled se designéři vždy soustředí na to, aby kladli větší důraz na typografii, která je stylová a zároveň úhledná.

Ti samí designéři byli dříve závislí na programech, jako je Photoshop; od doby, kdy byla implementována technologie CSS3 a je podporována většinou prohlížečů, se však situace hodně změnila.

Na různých moderních webových stránkách byste se již měli setkat s pokročilými efekty písma CSS.

Tyto druhy efektů se velmi rychle stávají velmi populárními, pokud jde o to, že se stávají velkým trendem ve webovém designu.

Těchto efektů lze dosáhnout i pomocí čistého jazyka CSS, což je na těchto druzích efektů webové typografie asi to nejlepší.

CSS3 je považováno za skutečnou revoluci, pokud jde o vývoj webových stránek. Nové vlastnosti obsažené v CSS3 umožňují vývojářům vizuálně vylepšovat své návrhy takovým způsobem, který je nejen působivý ve vizuálním smyslu, ale je také rychlý a snadný.

Webová typografie je jednou z hlavních věcí, které se s CSS3 dramaticky změnily. Svůj design můžete zatraktivnit pomocí několika jednoduchých triků CSS.

Pokud jde o webový design, CSS vám pomůže získat mnoho různých efektů písma, včetně použití takových efektů, jako je animace a oříznutí, které vše trochu okoření.

Abychom vám to pomohli ještě více ilustrovat, sestavili jsme seznam efektů, které jsou vizuálně ohromující a krásné, přičemž všechny jsou možné díky CSS a některé z nich také s trochou Javascriptu.

Obsah

• Animované textové efekty CSS
• Stínové textové efekty CSS
• 3D textové efekty CSS
• Pozadí textu CSS
• Hover textové efekty CSS
• Glitch textové efekty CSS
• .
• Cool CSS textové efekty

CSS animované textové efekty

Animace textu

Druhý z těchto CSS textových efektů je od Yoanna Helina. Vytvořil v CSS tento efekt, který jste mohli vidět na mnoha webových stránkách s portfoliem a prezentacemi.

Linkový text.

Animovaný text pomocí HTML, CSS a JavaScriptu.

COSMOS

Tento textový efekt CSS sice není nejužitečnější, ale přesto je působivý.

Tady je uvedeno, co autor použil:

• vw, vh, vmin jednotky pro odezvu
• flexbox pro vycentrování všeho
• více box-shadows pro hvězdy
• keyframes animace pro planety
• transformace pro otáčení planet

Animovaný „text-stín“ vzor

Používá -webkit-background-clip: text & lineární gradient pro simulaci pruhovaného textového stínu.

Reklama

Animované podepisování podpisu (cesty SVG)

Pomocí tohoto pera lze animovat psaní podpisu pomocí SVG stroke-dashoffset/stroke-dasharray a přechodů CSS.

SVG Path animated Text

Animovaný text „Design“ na základě jedné cesty SVG. Kliknutím přepnete animaci.

Animovaná výplň textu s cvičným textem svg

Animovaná výplň textu pomocí HTML(Pug), CSS(SCSS) a SVG.

Animovaný text s Snapsvg

Práce s tím je jako starý dobrý Flash 🙂

Vertikálně rotující text css s předponami prohlížeče

Vertikálně rotující text s HTML a CSS.

Vertikálně rotující text

Rotující text v HTML, CSS a JavaScriptu.

#Codevember 3D Quote Rotator

Pomocí GreenSocku a pluginu SplitText vytvoříte 3D efekt textu.

Impossibly Tipsy

Zajímavý efekt pro text.

Foggy text effect

Cinematic intro text effect (Webkit only – text mask). Je to experimentální, ale přesto jsem ho musel zařadit mezi tyto efekty CSS.

webdev series – Barevná animace textu #aktualizováno

Plynulý a konfigurovatelný modul barevné animace textu vytvořený pomocí SCSS.

CSS Textová výplň s vodou

Dalším z těchto textových efektů CSS je textová výplň s animací vody, pro preloadery a podobně.

GSAP Textová animace

Textový efekt pomocí Greensocku.

Vlnový textový efekt (s režimem SVG/blend)

Vlnový textový efekt pomocí HTML a CSS.

Rozbíjející se textová animace

Rozbíjející se textová animaceGSAP. Roztříštění cesty SVG. Zpomalený pohyb při najetí myší.

Třepotavý text

Třepotavý text experiment s filtry SVG.

Animované titulky

Sbírka animovaných titulků s vyměnitelnými slovy, která se navzájem nahrazují pomocí přechodů CSS.

Animace textu: Stínovaný text

Animace textu v jazyce HTML a CSS.

Stínovaný text

Stínovaný text, experiment SVG + CSS3 o animovaných stínech. Není optimalizován pro mobilní zařízení… zatím.

Animování textu SVG

Animování textu HTML, CSS a SVG.

kreslení barvy textu

Kreslení cesty textu pomocí pluginu greensock drawSVG.

Animace čistého CSS textu

Animace textu v HTML a CSS.

Animovaná výplň textu

Vyplňte svůj text animovanými obrázky na pozadí – není potřeba žádný JavaScript.

Bublající textový efekt

Příklad poháněný jQuery, jak můžete vytvořit bublající efekt na nadpisu HTML. Bubliny vypadají, jako by vycházely zpoza textu, a pak zmizí a jsou odstraněny.

Dýmový text

Kombinace textového stínu a transformací CSS (zejména zkosení) pro kouřový (nebo dýmový?) efekt.

jquery break/animate deformace textu příklad odstavce

HTML, CSS a JavaScript break/animate deformace textu příklad odstavce.

Animovaná vlna oříznutá textem

Animovaná vlna uvnitř textu se svg. Obrázek na pozadí a gradient vyplňující vlnu.

(cool) textový efekt

Animovaný text s obrázkem GIF.

Nezadaný

Animovaný text s HTML, CSS a JS.

Odhalení rozděleného textu

Odhalení rozděleného textu v HTML, CSS a JavaScriptu.

Onion Skinning Text Morphing

Onion Skinning Text Morphing in HTML/CSS/JS.

Animace stínování textu

Animace stínování textu pomocí HTML a CSS.

SVG video-maska na textu

SVG video-maska na textu.

GSAP text reveal animace

GSAP text reveal animace.

SVG animace textu

Pěkná SVG animace textu.

Pouze náhodná transformace textu (animovaná)

Generování náhodné transformace textu pouze pomocí CSS.

Tichý filmový textový efekt

Tichý filmový textový efekt s canvas.

Animace odhalování textu CSS

Čistá animace odhalování textu CSS.

Animace písmen

Animace písmen pomocí CSS.

Animace textových čar

Pěkná animace textových čar pomocí TweenMax.js.

Helo!!!

Klikněte pro překreslení! Mapování spritů na text je vždy zábavné.

Pouze zmrazený text CSS

Pouze zmrazený textový efekt CSS s background-clip, režimy prolnutí a gradientním textem.

efekt písmen

Efekt písmen při posouvání.

Maskovací animace cesty

Někdy je jednoduchý efekt stejně účinný jako složitý.

Animace rukopisu (SVG + CSS)

Animace rukopisu SVG a CSS. Aby bylo možné optimalizovat SVG pro animaci, byla grafika rozřezána na menší části. To bylo provedeno především proto, aby se prvky cesty nepřekrývaly s nesouvisejícími prvky clipPath, ale také to umožnilo jemnější kontrolu nad animací. Všechny animované prvky cesty byly exportovány z aplikace Adobe Illustrator a doladěny pomocí kódu.

Animovaný textový gradient

Pěkný animovaný text s gradientem.

CSS Shadow textové efekty

CSS Dashed Shadow

Čistý css hipsterský typografický přerušovaný stín.

Hit The Floor Text Effect

CSS3 text-shadow effects

HTML and CSS3 text-shadow effects.

Long Shadow Gradient Mixin

Mixin Sass (Scss) pro rychlé generování dlouhých stínových gradientů. Vhodné pro ‚text-shadow‘ i ‚box-shadow‘.

CSS Text Shadow

Pokus o výuku na Lynda.com. CSS: Pokročilé typografické techniky pomocí lettering.js

Text-Shadow

HTML a textový stín CSS.

Úžasný textový stín

Úžasný textový stín s CSS3.

Stínová paralaxa – Reactjs

Hýbejte myší a přehrávejte slova. Napsáno pomocí React, ES6, Babel transpiler.

Neon text-shadow efekt

9 neonových CSStext-shadow efektů.

Štylování textu pomocí SVG (druhý stín)

Štylování textu pomocí SVG.

Pěkný stín

Pěkný stín pomocí HTML a CSS.

Textový stín

Čistý textový stín CSS.

Fantastický textový stín

Fantastický textový stín.

Groovy efekt CSS

Efekt písma 1960 pomocí vlastnosti CSS text-shadow spolu s funkcí SASS a mixiny pro zachování DRY kódu.

3D textové efekty CSS

3d Textový efekt – mousemove

Pěkný 3D textový efekt s jQuery mousemove.

3D extrudovaný textový efekt- pouze CSS

HTML a CSS 3D extrudovaný textový efekt.

CSS Text Stroke | CSS Text Border – Nekonečný efekt pouze s #CSS #html5

Změňte text a uvidíte animaci znovu.

3D typografie CSS

Jednoprvkový, vícebarevný 3d efekt textu

Jednoprvkový s vícebarevným textem a 3D efektem stínu textu. Jen si hrajeme s různými vlastnostmi CSS a vytváříme zábavné textové efekty.

Jen SS: Textová vlna

Jen textová vlna CSS.

Překroucený a otočený text

Text s CSS skew() a rotate().

3d textové marquee efekty

3D textové marquee efekty.

Pozadí textu CSS

-webkit-background-clip:text Efekt CSS

Pomocí -webkit-background-clip: text a -webkit-fill-text-color : transparent použijete pozadí na text v prohlížeči Webkit.

Nastavte zpětnou barvu pro ostatní prohlížeče.

Odříznutí pozadí

Odříznutí pozadí textu.

SVG Knockout Text s videopozadím

Tato ukázka zkoumá vytváření knockoutovaného textu/cest v SVG a smyčkování videa YouTube jako výplně.

Maska textu SVG

Hladké pozadí textu s filtry SVG

Ukázka použití hladkého filtru SVG k vytvoření hladkých okrajů kolem řádkového textu s pozadím.

Přesouvání textu v mracích | HTML + CSS

Přesouvání textu v mracích pomocí HTML a CSS.

Pokusy o text CSS s inline zkoseným pozadím

Použití zkosení se vykreslí pouze v případě, že je položka display: block nebo inline-block. Některé z nich vypadají na širokém panelu zobrazení stejně, ale při zmenšení šířky panelu zobrazení selhávají jinak.

CSS hover textové efekty

Otvírací typ

Efek Typografie Text Neon část 1

Design textu (typografie) s neonovým efektem.

Pohybující se pozadí textové masky na MouseMove – v2

Vyzkoušení nové funkce „background-clip: text“, s pohybujícím se pozadím.

Transformace odloupnutého textu

Toto pero zobrazuje text, který vypadá, jako by byl odloupnutý ze stránky. Po najetí myší má plynulou animaci.

Šťastný text

HTML a CSS efekt šťastného textu.

Animovaný zvýrazněný text

Námět je jednoduchý, využívá lineární gradient a přechod.

3d hover textový efekt

HTML, CSS a JavaScript 3d hover textový efekt.

CSS Perspective Text Hover

Experiment s použitím webových fontů v kombinaci s nástroji 3D transformace CSS.

Focus Text Hover Effect | HTML+ CSS + jQuery

Hover CSS effect for text.

Animované podtržení

Demo animovaného efektu podtržení. Čistá animace CSS.

Jak získám vlastní barevné podtržení, které bude přesahovat více řádků?

Pěkný efekt hover podtržení.

Jednoduchý CSS Hover efekt pomocí smyček Sass

Jednoduchá malá hover animace. Díky smyčkám Sass je ohromující zpoždění animace opravdu snadné… můžete z nich vytěžit spoustu kilometrů.

Spring Text Hover Effect

Zrovna jsem si hrál s efekty pro tlačítka a tohle mi přišlo docela cool.

Složené textové vrstvy

Obsah generovaný pomocí JS.

CSS glitch text

Barevný glitch 404

CSS glitch text by skew

HTML a CSS glitched text by skew.

CSS-jen-glitch efekt

Glitch druh efektu s CSS animací.

Glitch

Glitch text s HTML a CSS.

Glitchy Text

Glitchy text s HTML a CSS(SCSS).

Glitch Text

HTML(Pug) a CSS(SCSS) glitch text.

Glitched Text (studie The Verge)

HTML, CSS a JavaScript glitched text.

SVG Glitch

VHS text

VHS text s HTML, CSS a JavaScriptem.

Psycho-glitch (proměnné CSS & @keyframes)

Efekt „glitch“, ztvárněný pomocí animovaných vlastních vlastností CSS. Pure CSS.

Jednoduchý textový glitch

Jednoduchý textový glitch CSS.

Chladné textové efekty CSS

Efekt lomené CSS

Elastický tah CSS + SVG

První z těchto chladných textových efektů CSS pochází od Yokselu. Pro tuto krásnou textovou animaci CSS zvolila úžasné barevné schéma.

SVG Text: Animované psaní

HTML, CSS a animované psaní SVG.

Typování textu thingamy

Typování textu thingamy v HTML, CSS a JavaScriptu.

Futuristické řešení/typování textu feat. GLaDOS

Futuristic resolving/typing text effect usually found in game or movie cut scenes to reveal text on screen.

Přenos: Svítící animace textu

Malá svítící animace textu. Nejprve nějaký JS, který zabalí každé písmeno do rozpětí. Pak animace klíčového snímku s mixinem animace-zpoždění postupně rozsvítí každé písmeno.

Efekt scramble textu

Malý efekt dekódování/scramble textu.

Kinetický typ s Greensockem

Kinetický typ s HTML, CSS a JavaScriptem (Greensock).

LOVE Text Effect

Skramblovaný textový efekt inspirovaný oceňovaným sci-fi filmem „LOVE“.

Automatické psaní textu (funkce)

Automatické psaní textu pomocí HTML, CSS a JavaScriptu.

Typování textu

Typování textu v jazycích HTML, CSS a JavaScript.

Typování textu

Typování textu pomocí jednoduché funkce JQuery. Stačí zavolat funkci s prvkem, který chcete animovat, jako prvním argumentem a rychlostí animace jako druhým argumentem.

Pokud se vám tento článek s textovými efekty CSS líbil, měli byste se podívat také na tyto články:

• Knihovny animací CSS a Javascriptu pro vytváření úžasných efektů
• Příklady slideshow CSS, které můžete použít na svých webových stránkách
• Několik nejpopulárnějších knihoven CSS, které jsou na Githubu