Cauta rapid aici ↑

CSS 3- EFECTE PE TEXT

Noul standard CSS3 ne permite sa aplicam anumite efecte pe text. Efectul de umbra, "ruperea" unui cuvant foarte lung, adaugarea unei anumite distante intre cuvintele textului sau intre litere sunt doar cateva dintre aceste efecte, acestea fiind si cele mai importante. Pentru a reusi aceste efecte vom avea nevoie de urmatoarele proprietatii :

  • text-shadow
  • word-wrap
  • word-spacing
  • letter-spacing

Proprietatea text-shadow

Principiile care stau la baza unui efect de umbra pe un text sunt identice cu cele pentru care ne dorim sa aplicam un efect de umbra la un element boxa, ca de exemplu div. Si aici vom avea patru valorii . Primele doua valorii vor fi pentru axele X si Y , a treia valoare va fi pentru cat de blurata sa fie umbra iar a patra valoare va fi culoarea umbrei .

Proprietatea word-wrap

Cu ajutorul acestei proprietati putem sa "rupem" un cuvant care este prea lung si nu incape in spatiul alocat lui. Valoarea folosita va fi break-word .

Proprietatea word-spacing

Aceasta proprietate defineste un spatiu mai mic sau mai mare intre cuvintele textului. Valoarea cea mai folosita pentru a defini un spatiu intre cuvinte este exprimata in pixeli .

Proprietatea letter-spacing

Aceasta proprietate defineste un spatiu mai mic sau mai mare intre literele textului. Valoarea cea mai folosita pentru a defini un spatiu intre litere este exprimata in pixeli .

CSS3 - TEXT NEON

Acum ca ati facut cunostinta cu aceste proprietatii, in urmatorul exemplu va voi arata cat de puternica si utila este proprietatea text-shadow. Pe aceasta proprietate putem folosi si valori negative pentru un efect de neon sau similar iar urmatorul exemplu vorbeste de la sine.

COD TEXT NEON

Daca vrei sa vezi cum se face si un text 3D doar din CSS 3 si tot cu proprietatea text-shadow, atunci te invit sa vezi in urmatoarea pagina. CSS3 TEXT 3D