Acum câteva săptămâni, am publicat o serie de efecte text CSS pentru a îmbunătăți prezentarea titlului H2 al unui produs sau a antetului unei postări de servicii de pe site-ul web al unui client. Aceste efecte text CSS oferă acea notă suplimentară de calitate pe care o căutăm pentru a impresiona clienții și a-i face să revină pe termen lung.
Ne-am întors cu o altă listă excelentă de efecte de text CSS, special concepute pentru a prezenta produsul, serviciul, pagina de destinație sau alt site web în cel mai bun mod posibil . Aceste 35 de efecte de text sunt indispensabile, dovedind că designul web este la cel mai înalt nivel astăzi și că nu ne putem permite să ratăm cele mai recente tendințe.
Efect text text film silențios
Un efect de text foarte particular, prezentat ca fiind perfect pentru un anumit tip de temă. Poate fi afișat între ghilimele pentru a indica clar că ne concentrăm pe designul site-ului nostru web sau al clientului.
Introducere aleatorie de text CSS
Această intrare de text CSS aleatorie este concepută pentru a fi generată aleatoriu, precum cheia secretă dintr-un șir de caractere . Este o modalitate foarte atrăgătoare de a prezenta text pe un site web dedicat unei anumite teme.
Cassie
O animație SVG , rezultând o prezentare foarte ușoară a textului care se formează treptat în diverse culori, este utilizată pentru a crea un efect vizual izbitor. Textul în sine, care utilizează și JavaScript, este deosebit de atrăgător.
Text animat de umbră
Acest text animat cu umbră are o notă estetică foarte particulară, diferită de restul intrărilor din listă. Aici, am renunțat la JavaScript și am folosit doar cod CSS.
Morph text
Text animat creat cu JavaScript și CSS care alternează între culori neon. Ideal pentru site-uri web cu fundal negru sau gri. O animație fluidă pentru un efect de text unic.
Relieful textului divizat
Acest text este plasat într-un efect pentru a fi afișat într-o animație foarte bine realizată . De asemenea, folosește JavaScript. Cu un singur clic, puteți vedea animația creată pentru un efect de text destul de interesant.
Animație val
Animație de undă în text folosind un fișier SVG. Unul dintre aspectele interesante ale acestui efect de text este imaginea de fundal și gradientul care umple unda, făcând-o să iasă în evidență eficient.
Text de urzeală animat
Cu puțin JavaScript, poți crea un efect de text în care fiecare literă are propria valoare de dimensiune , făcându-l să pară alcătuit din autocolante cu litere diferite. Un efect excelent pentru text creativ într-o prezentare.
Efect de fum
Un efect de fum excelent pentru text, care dispare treptat până când dispare complet. Poate fi folosit atunci când se atinge sau se dă clic, textul se evaporă sub ochii noștri. Nu este necesar JavaScript și există foarte puțin cod CSS.
Efect de bule
Un efect de text jQuery care arată cum se creează un efect de bule într-un antet HTML . Efectul face ca bule să apară în spatele textului, ca apa spumoasă. Foarte atrăgător.
Text de umplere animat
Un efect de text animat care umple fontul cu imaginea de fundal. Nu necesită JavaScript și folosește doar cod CSS. O animație lentă și fluidă pentru text, care va arăta perfect pe anumite teme de site web.
Animație text în CSS și HTML
O animație text simplă în CSS și HTML care face ca cuvintele să cadă vertical de sus. Am omis JavaScript aici pentru a crea o animație simplă, fără prea multe înflorituri.
Desen color color
Aici, textul este redat cu un efect de culoare izbitor , perfect pentru teme legate de adolescență sau tinerețe. În cele din urmă, acesta rămâne alb, în timp ce fontul este iluminat de o serie de tonuri vibrante.
Text animat în SVG
O animație de o secundă derulează întregul text SVG. Include o cantitate mică de cod JavaScript pentru a completa CSS-ul și HTML-ul.
Text din umbră
Umbra din acest text creează un efect de adâncime cu culori izbitoare care par aproape că aparțin unei cofetării. Singurul dezavantaj este că nu este optimizat pentru dispozitive mobile.
Montserrat
Această animație CSS și HTML se remarcă prin creativitatea și culorile vibrante, de la galben la roșu . Animația sa unică, care prezintă aceste culori care se revarsă pe text, o face potrivită pentru utilizări specifice.
Efect exploziv
Un efect de text care descompune cuvintele în numeroase bucăți , care poate fi încetinit prin plasarea cursorului mouse-ului peste fiecare literă a cuvântului. Un efect de text impresionant, de înaltă calitate, care utilizează HTML, CSS și JavaScript.
Efect de text Wave
Fără JavaScript, acest efect de text în formă de undă creează o animație care mișcă imaginea de fundal prin forma cuvântului. Fără îndoială, atrăgător și foarte eficient.
Animație GSAP
Ca în multe filme, toate literele care alcătuiesc un paragraf vor apărea din toate direcțiile pentru a compune în cele din urmă propozițiile cu un efect deosebit în animație. Foarte fluid, ceea ce îl face unul dintre cele mai izbitoare și de cea mai înaltă calitate efecte de text din întreaga listă . Un element obligatoriu de reținut pentru anumite tipuri de lucrări pentru clienți.
Animație text colorată
O animație de culoare lentă și fluidă în text creează un efect de gradient. Deși folosește o parte din JavaScript, se bazează în principal pe SCSS. Este unul dintre acele efecte subtile care scot în evidență eleganța unui element bine ales pentru web. Nu va trece neobservat.
Efect de text imposibil
Caseta roșie care înconjoară textul se rotește cu un efect de umbră care acoperă treptat cuvântul sau fraza. Este foarte atrăgător și adaugă o notă de eleganță intrării sau antetului unui site web.
Umplere text multicolor cu SVG
Această animație de umplere multicoloră iese în evidență ca unul dintre acele efecte de text care strălucesc cu adevărat. Este unică pe listă și are acele atingeri extravagante care vor evoca sentimente puternice vizitatorilor site-ului web. Dacă este plasată corect, cu siguranță va face o declarație.
Text animat în SVG
E ca și cum calea ar fi țesută spre desenarea unui text animat genial în SVG . Unul dintre cele mai curioase de pe listă și iese perfect în evidență.
Text glitch
Acest text, scris în JavaScript, CSS și HTML, ar putea fi atingerea perfectă pentru o agenție de publicitate , adăugând un element unic unei propoziții. Efectul este inspirator și captează atenția vizitatorului.
Text glitch
Ca și cum ar exista interferențe în semnalul care desenează sau animă textul , acest efect de text este incredibil de rafinat. Fără îndoială unic, vorbește de la sine. Creat în HTML (pug) și CSS (SCSS).
Text glitch SCSS
Un alt text cu erori și interferențe pe care îl veți găsi pe un site web foarte special datorită temei sale, cu siguranță legat de science fiction.
Plasați cursorul pe text
Când plasați cursorul peste text, acesta se va transforma într-un fel de reticulă , permițându-vă să îl mutați peste fiecare literă pentru a vă concentra asupra ei, deoarece restul vor fi neclare. HTML, CSS și JavaScript creează un efect de text cu adevărat unic.
Plasați cursorul în perspectivă
Când plasăm indicatorul mouse-ului peste acest text , acesta se va mișca într-o perspectivă foarte curioasă, care transmite efectul 3D.
Text de evidențiere animat
Folosind indicatorul mouse-ului, vom evidenția textul ca și cum ar fi pe cale să fie copiat sau tăiat . Un efect de text care cade de sus, acoperind toate cuvintele din paragraf. Fără JavaScript, doar CSS.
Text fericit
Un efect de text vesel care pulsează până când treci cu mouse-ul peste unele litere. Efectul rezultat este că unele litere vor sări la efectul dorit. Realizat cu CSS, nu este necesar JavaScript.
Text 3D în compoziție
Un alt efect de text 3D care formează cuvinte din litere individuale care apar simultan într-o vizualizare mărită. Este uimitor din punct de vedere vizual și cinematografic. O altă recomandare din listă.
Text CSS pur în umbră
Acest efect de text CSS pur creează o umbră izbitoare și elegantă. Inconfundabil și un alt efect remarcabil de pe listă. Fără animație, dar genial.
Destul de umbră
Un efect de umbră care arată foarte bine. Perfect pentru pagini de destinație sau site-uri web pentru pepiniere . CSS pur pentru a-l face să iasă în evidență.
A doua umbră
Un alt efect de umbră excelent în HTML și CSS care iese în evidență prin sine. Umbrele liniare adaugă o notă de eleganță site-urilor web cu teme specifice.
Parallax Shadow
Încheiem lista cu unul dintre cele mai elegante efecte de paralaxă pentru umbra proiectată de text. Plasați cursorul mouse-ului peste text; cu cât treceți mai la dreapta, cu atât umbra va apărea mai departe. Scris de Ract, ES6 și Babel.
Aveți o altă listă de efecte de text aici.