15 Efecte de text frumoase create cu CSS

Textul frumos sau tipografia vă vor face designul atrăgător. În designul web, CSS vă ajută să dați stilul de a proiecta, inclusiv diferite efecte în text sau tipografie. Cu ajutorul CSS, puteți folosi tăierea și adăugați animație în text pentru a împrospăta lucrurile puțin.

Și pentru a ilustra acest lucru, am adunat 15 efecte de text uimitoare și reci, care sunt posibile cu CSS (unele cu un pic de ajutor de la codurile Javascript).

Pentru mai multe lucruri pe care le puteți face cu CSS, verificați:

• 18 lucruri cool pe care nu le vei crede au fost construite folosind CSS
• 30 biblioteci cu efecte de text jQuery pe care trebuie să le cunoașteți
• Cum de a crea o formă de inimă cu CSS
• Animate.css - Biblioteca CSS3 pentru a crea animație cu ușurință

Animație elastică

Yoksel animă lovitura textului cu o schemă de culoare rece. Acest efect se face cu CSS și SVG. Rezultatul este minunat!

SVG Glitch

Doriți să faceți efecte care arata ca un televizor analogic rupt? Dirk Weber a făcut acest efect uluitor de glitch folosind filtrul CSS și SVG.

Logo-ul Shop Talk

Logo-ul Shop Talk este recreat de Hugo folosind doar CSS. Logo-ul arată similar cu cel original, complet cu textura potrivită.

Efectul tăiat

Această idee de către Robet Messerle dă efectul tăiat cuțit, realizat cu mai puțin de 70 de linii de CSS.

Efectul Shadow Elegant

Efectul Shadow Long vine în text, realizat folosind CSS. Creatorul, Juan Brujo, a făcut 4 alte efecte, dar acesta este ușor cel mai impresionant.

Efect de text în ceata

Andreas creează un efect minunat de ceață în cinematografie. Aplicabil numai în browserele Webkit.

SVG masca de text

Un design realizat de Marco Barria prezintă un efect elegant de mascare a textului pe o imagine de fundal mare.

Text Animație

Yoann a creat un efect grozav cu această animație de text. Urmăriți modul în care al doilea cuvânt se substituie între trei cuvinte.

Hit The Floor

Acest efect 3D al lui ThatGuySam este un joc simplu pe umbrele de text, dar cu un rezultat minunat.

Clip Text de fundal

Jintos se juca cu un clip de fundal Webkit pentru a adăuga o imagine de fundal în interiorul textului. A făcut 16 creații reci folosind această metodă.

CSS Text-FX

Moklik a adăugat efectul luminos de lumină asupra textului, oferindu-vă clipește intermitentă care avertizează asupra pericolului din afară.

Semnarea animată a semnăturii

Gary Hepting a creat o animație de semnare în timp real. Acest lucru funcționează prin aplicarea Javascript pe calea SVG pentru a anima semnarea.

Colorat Glitchy 404

Puteți auzi sunetul acestei probleme și simțiți vibrația, în interiorul capului? Atât de bun este efectul glitch. mistic100 făcut cu CSS plus un pic de Javascript.

Cosmos

Acum, acesta este un logo elegant și inspirat. Este, de asemenea, potrivit pentru utilizarea pentru “Cosmos”, pentru că orbite, ia-o?

se incarca

Un efect de încărcare rece care este pur și simplu ascunderea și afișarea literelor.