116 exemple de efecte de text CSS cool pe care le puteți descărca

Ai venit aici pentru câteva efecte de text CSS foarte cool care vă vor ajuta să faceți o tipografie web uimitoare pentru site-urile dvs. web.

Pentru a conferi cu succes unui site web un aspect mai impresionant din punct de vedere vizual, designerii se concentrează întotdeauna să pună mai mult accent pe o tipografie care este atât elegantă, cât și îngrijită în natură.

Aceiași designeri obișnuiau să depindă de programe precum Photoshop pentru a realiza acest lucru; cu toate acestea, de când CSS3 a fost implementat și susținut de majoritatea browserelor, lucrurile s-au schimbat mult.

Ar trebui să vedeți deja efecte avansate de fonturi CSS pe diverse site-uri web moderne.

Aceste tipuri de efecte devin foarte populare foarte repede în ceea ce privește devenirea unei mari tendințe în designul web.

Acestea pot fi realizate și cu CSS pur, ceea ce este poate cel mai mare lucru despre aceste tipuri de efecte de tipografie web.

CSS3 este considerat o adevărată revoluție când vine vorba de dezvoltarea web. Noile proprietăți conținute în CSS3 permit dezvoltatorilor să își îmbunătățească vizual designul în așa fel încât nu numai că este impresionant din punct de vedere vizual, dar este și rapid și ușor.

Tipografia web este un lucru major care s-a schimbat dramatic cu CSS3. Puteți face ca designul dvs. să arate atractiv cu doar câteva trucuri CSS simple.

Când vine vorba de web design, CSS vă va ajuta să obțineți multe efecte de font diferite, inclusiv să folosiți efecte precum animația și clipping pentru a condimenta puțin lucrurile.

Pentru a vă ajuta să ilustrați mai bine acest lucru, am alcătuit o listă de efecte care sunt uimitoare și frumoase din punct de vedere vizual, toate acestea fiind posibile prin CSS, iar unele dintre ele și cu puțin Javascript.

Tabel de conținut

• Efecte de text CSS animate
• Efecte de text CSS Shadow
• Efecte de text CSS 3D
• Fundalul textului CSS
• Efecte de text CSS hover
• Efecte de text CSS glitch

.

• Efecte text CSS cool

Efecte text animate CSS

Animare text

Al doilea dintre aceste efecte text CSS este de la Yoann Helin. El a creat în CSS acest efect pe care poate l-ați văzut pe o mulțime de site-uri de portofoliu și de prezentare.

Line text.

Text animat cu HTML, CSS și JavaScript.

COSMOS

Chiar dacă acest efect de text CSS nu este cel mai util, este totuși impresionant.

Iată ce a folosit autorul:

• vw, vh, unitățile vmin pentru reactivitate
• flexbox pentru a centra totul
• multe box-shadows pentru stele
• animație keyframes pentru planete
• transformare pentru a roti planetele

„text-” animat.shadow” model

Utilizează -webkit-background-clip: text & linear-gradient pentru a simula umbra textului în dungi.

Anunț

Semnare animată a semnăturii (trasee SVG)

Utilizați acest stilou pentru a anima scrierea unei semnături cu SVG stroke-dashoffset/stroke-dasharray și tranziții CSS.

SVG Path animated Text

Animați textul „Design” pe baza unui traseu SVG. Faceți clic pentru a comuta animația.

Animated text fill with svg text practice

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

Text animat cu Snapsvg

Lucrați cu acest lucru se simte ca un vechi și bun Flash 🙂

Css de rotire verticală a textului cu prefixe de browser

Text de rotire verticală cu HTML și CSS.

Text rotativ

Text rotativ în HTML, CSS și JavaScript.

#Codevember 3D Quote Rotator

Utilizarea GreenSock și a plugin-ului SplitText pentru a crea un efect de text 3D.

Imposibly Tipsy

Efect interesant pentru text.

Foggy text effect

Efect de introducere cinematografică a textului (doar Webkit – mască de text). Acesta este experimental, dar totuși a trebuit să-l includem printre aceste efecte CSS.

webdev series – Colorful text animation #updated

Modul fluid și configurabil de animație de text colorat realizat cu SCSS.

CSS Text de umplere cu apă

Următorul dintre aceste efecte de text CSS este o animație de umplere a textului cu apă, pentru preloaderi și altele asemenea.

GSAP Text Animation

Efect de text folosind Greensock.

Efect text wave (cu modul SVG/blend)

Efect text wave cu HTML și CSS.

Shattering Text Animation

GSAP text animation. Zdrobirea căii SVG. Slow motion on hover.

Squiggly Text

Squiggly text experiment cu filtre SVG.

Animated Headlines

O colecție de titluri animate, cu cuvinte interschimbabile care se înlocuiesc unele pe altele prin tranziții CSS.

Text Animation: Montserrat

HTML și CSS text animation.

Shaded Text

Shaded text, un experiment SVG + CSS3 despre umbrele animate. Nu este optimizat pentru dispozitive mobile… încă.

Animating SVG text

HTML, CSS și SVG animating text.

text color draw

Desenarea textului folosind plugin-ul drawSVG de la greensock.

Pure CSS Text Animation

HTML și CSS text animation.

Fill text animat

Fill your text with animated background images – no JavaScript required.

Bubbling Text Effect

Un exemplu alimentat de jQuery despre cum puteți crea un efect de bubbling pe un titlu HTML. Bulele apar ca și cum ar veni din spatele textului, apoi se estompează și sunt eliminate.

Smoky Text

Combinarea text-shadow și a transformărilor CSS (în special skew) pentru un efect smoky (sau smokey?).

jquery break/animate warping text paragraph example

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

Animated wave clipped by text

Animated wave inside text with svg. Imagine în fundal și gradient care umple valul.

(cool) text effect

Text animat cu imagine GIF.

Untitled

Text animat cu HTML, CSS și JS.

Splitted text reveal

HTML, CSS și JavaScript splitted text reveal.

Morphing text skinning de ceapă

Morphing text skinning de ceapă în HTML/CSS/JS.

Text-Shadow Animate

Text-Shadow animate with HTML and CSS.

SVG video mask on text

SVG video mask on text.

GSAP text reveal animation

GSAP text reveal animation.

Animare text SVG

Frumoasă animație text SVG.

CSS Only Random Text Transform (Animated)

Generați o transformare aleatorie a textului folosind doar CSS.

Silent Movie Text Effect

Efect de text de film cu canvas.

CSS TEXT REVEALING ANIMATION

Animație de dezvăluire a textului în CSS pur.

Letter Animation

Animarea literelor cu CSS.

Text Line Animation

Frumoasă animație de linii de text cu TweenMax.js.

Helo!

Click to re-draw! Maparea spiritelor în text este întotdeauna distractivă.

CSS only Frozen text

CSS only frozen text effect with background-clip, blend modes and gradient text.

Efect de litere

Efect de litere pe scroll.

Masking Path Animation

Câteodată simplu este la fel de eficient ca și complex.

Handwriting Animation (SVG + CSS)

SVG și CSS handwriting animation. Pentru a optimiza SVG-ul pentru animație, graficul a fost tăiat în bucăți mai mici. Acest lucru a fost făcut în primul rând pentru a preveni suprapunerea elementelor de traseu cu elemente clipPath fără legătură, dar a permis și un control mai fin asupra animației. Toate elementele de traseu animate au fost exportate din Adobe Illustrator și ajustate fin cu cod.

Animated Text Gradient

Text animat frumos cu gradient.

CSS Shadow text effects

CSS Dashed Shadow

Pure css hipster-ish typographic dashed shadow.

Hit The Floor Text Effect

CSS3 text-shadow effects

HTML and CSS3 text-shadow effects.

Long Shadow Gradient Mixin

Un Mixin Sass (Scss) pentru a genera rapid gradienți de umbră lungă. Potrivit atât pentru ‘text-shadow’, cât și pentru ‘box-shadow’.

CSS Text Shadow

Făcând o încercare la un tutorial Lynda.com. CSS: Tehnici tipografice avansate folosind lettering.js

Text-Shadow

HTML și CSS text-shadow.

Awesome Text-Shadow

Awesome text-shadow with CSS3.

Shadow Parallax – Reactjs

Mutați mouse-ul și jucați cuvinte. Written by React, ES6, Babel transpiler.

Neon text-shadow effect

9 neon CSStext-shadow effects.

Styling Text with SVG (Second Shadow)

Styling text with SVG.

Pretty shadow

Pretty shadow with HTML and CSS.

Text-shadow

Pure CSS text shadow.

Fancy text shadow

Fancy text shadow.

Groovy CSS Effect

Efect de font din anii ’60 folosind proprietatea CSS text-shadow împreună cu funcția SASS și mixins pentru a menține codul DRY.

Efecte de text CSS 3D

Efect de text 3D – mousemove

Frumos efect de text 3D cu jQuery mousemove.

3D extrude text effect- CSS only

HTML și CSS 3D extrude text effect.

CSS Text Stroke | CSS Text Border – Efect infinit doar cu #CSS #html5

Schimbă textul pentru a vedea din nou animația.

3D CSS Typography

Single element, multi color 3d text effect

Single element with multi color text and 3D text shadow effects. Doar mă jucam cu diferite proprietăți CSS pentru a crea efecte de text amuzante.

Only SS: Text Wave

Only CSS text wave.

Skewed and Rotated Text

Text cu CSS skew() și rotate().

3d text marquee effects

3D text marquee effects.

CSS text background

-webkit-background-clip:text efect CSS

Utilizați -webkit-background-clip: text și -webkit-fill-text-color : transparent pentru a aplica un fundal unui text în browserul webkit.

Setați o culoare de rezervă pentru alte browsere.

Background-clipping

Text background clipping.

SVG Knockout Text with Video Background

Această demonstrație explorează crearea de knockout text/paths în SVG și rularea în buclă a unui videoclip YouTube ca umplutură.

SVG text mask

Gooey text background with SVG filters

Exemplu de utilizare a unui filtru SVG gooey pentru a crea margini netede în jurul textului în linie cu un fundal.

Moving Cloud Text | HTML + CSS

Moving cloud text with HTML and CSS.

CSS Încercări de text cu fundal înclinat inline

Utilizarea înclinării este redată doar dacă elementul este display: block sau inline-block. Unele dintre acestea arată la fel pe un viewport larg, dar eșuează diferit pe măsură ce lățimea viewportului este redusă.

Efecte de text hover CSS

Tip de deschidere

Efek Typography Text Neon part 1

Design de text (tipografie) cu efect neon.

Text-mask background moving on MouseMove – v2

Încercarea noii funcții „background-clip: text”, cu fundal în mișcare.

Peeled Text Transforms

Acest pix arată un text care arată ca și cum ar fi desprins din pagină. Are o animație lină atunci când este trecută.

Happy Text

HTML și CSS efect de text fericit.

Animated highlighted text

Ideea este simplă, se face uz de gradient liniar și tranziție.

3d hover text effect

HTML, CSS and JavaScript 3d hover text effect.

CSS Perspective Text Hover

Un experiment folosind webfonts în combinație cu instrumente de transformare 3D CSS.

Focus Text Hover Effect | HTML+ CSS + jQuery

Efect CSS de trecere peste text.

Sublinieri animate

Demostrarea unui efect de subliniere animat. Animație CSS pură.

Cum obțin o subliniere colorată personalizată care se va întinde pe mai multe rânduri?

Efectul de suprapunere a sublinierii.

Simple CSS Hover Effect using Sass Loops

Simplă și mică animație hover. Buclele Sass fac ca întârzierile de animație uluitoare să fie foarte ușor de făcut… puteți obține o mulțime de kilometri din ele.

Spring Text Hover Effect

Mă jucam cu efecte pentru butoane și m-am gândit că acest lucru este destul de mișto.

Câmpuri de text amestecat

Contenit generat cu JS.

CSS glitch text

Colorful Glitchy 404

CSS glitched text by skew

HTML și CSS glitched text by skew.

CSS-Only Glitch Effect

Un fel de efect glitch cu animație CSS.

Glitch

Text glitch cu HTML și CSS.

Glitchy Text

Glitchy text with HTML and CSS(SCSS).

Glitch Text

HTML(Pug) și CSS(SCSS) glitch text.

Glitched Text (studiu de The Verge)

HTML, CSS și JavaScript glitched text.

SVG Glitch

Text VHS

Text VHS cu HTML, CSS și JavaScript.

Psycho Glitch (CSS variables & @keyframes)

Efectul „glitch”, recreat cu proprietăți personalizate CSS animate. Pure CSS.

Simple text glitch

Pure CSS simple text glitch.

Efecte de text CSS cool

Slashed CSS Effect

Elastic stroke CSS + SVG

Primul dintre aceste efecte de text CSS cool vine de la Yoksel. Ea a ales o schemă de culori uimitoare pentru această frumoasă animație de text CSS.

SVG Text: Typing animat

HTML, CSS și SVG animated typing.

Text typing thingamy

HTML, CSS și JavaScript text typing thingamy.

Futuristic Resolving/Typing Text Effect feat. GLaDOS

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

Transmission: Glowing Text Animation

O mică animație de text strălucitoare. Mai întâi, niște JS pentru a înfășura fiecare literă într-un span. Apoi, o animație keyframe, cu mixin animation-delay, luminează fiecare literă în succesiune.

Text Scramble Effect

Un mic efect de decodare/scramble a textului.

Kinetic Type with Greensock

Kinetic Type with HTML, CSS and JavaScript (Greensock).

LOVE Text Effect

Efect de text încâlcit inspirat de filmul SF premiat „LOVE”.

Auto Typing Text (function)

Auto typing text with HTML, CSS and JavaScript.

Typing Text

Text tastat cu HTML, CSS și JavaScript.

Typing Effect

Efect de tastare pentru text realizat cu o simplă funcție JQuery. Pur și simplu apelați funcția cu elementul pe care doriți să îl animați ca prim argument și viteza de animație ca al doilea argument.

Dacă v-a plăcut acest articol cu efecte CSS pentru text, ar trebui să consultați și aceste articole:

• CSS And Javascript Animation Libraries To Create Awesome Effects
• Exemple de slideshow-uri CSS pe care le puteți folosi pe site-urile dumneavoastră
• Câteva dintre cele mai populare biblioteci CSS care se află pe Github