`text-transform` în CSS

Afișează textul cu majuscule, minuscule sau cu prima literă mare la fiecare cuvânt, fără să schimbe textul din HTML.

Sintaxă CSS

text-transform: uppercase;   /* TOATE MAJUSCULE */
text-transform: lowercase;   /* toate minuscule */
text-transform: capitalize;  /* Prima Literă Mare */
text-transform: none;

Ce face `text-transform`

text-transform schimbă doar felul în care se afișează literele. Textul din HTML rămâne cum l-ai scris, deci motoarele de căutare și cititoarele de ecran primesc forma originală.

Conversia ține cont de limbă: setează lang="ro" pe <html>, ca browserul să aplice regulile corecte. Diacriticele românești se transformă corect: „ș” devine „Ș”, „ț” devine „Ț”, „â” devine „Â”.

capitalize face mare doar prima literă a fiecărui cuvânt; nu transformă restul literelor în minuscule. „IAȘI” rămâne „IAȘI”, nu devine „Iași”.

Valori uzuale

Valoare	Descriere
`none`	Textul apare exact cum este scris (implicit).
`uppercase`	Toate literele devin majuscule.
`lowercase`	Toate literele devin minuscule.
`capitalize`	Prima literă a fiecărui cuvânt devine majusculă.

Exemple

Exemplul 1: Butoane cu majuscule, text scris normal în HTML

Scrii „Adaugă în coș” în HTML și lași CSS-ul să-l afișeze cu majuscule.

.buton {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
/* <button class="buton">Adaugă în coș</button> */

Efect vizual în browser

Butonul afișează „ADAUGĂ ÎN COȘ”, cu diacriticele transformate corect în Ă, Î și Ș.

Exemplul 2: Nume de orașe venite din baza de date cu litere mici

capitalize face mare prima literă din fiecare cuvânt.

.oras {
  text-transform: capitalize;
}
/* <span class="oras">piatra neamț</span> */