Przykładem może byś słowo “nagłówek” które może zostać przedstawione użytkownikowi jako “NAGŁÓWEK” lub “Nagłówek”. Istnieją cztery możliwe wartości właściwości text-transform:

capitalize

Zamienia na dużą literę wszystkie pierwsze litery w wyrazach. Na przykład: “john doe” stanie się “John Doe”.

uppercase

Konwertuje wszystkie litery na duże. Na przykład: “john doe”stanie się”JOHN DOE”.

lowercase

Konwertuje wszystkie litery na małe. Na przykład: “JOHN DOE”stanie się”john doe”.

none

Bez transformacji – tekst jest prezentowany tak jak został on umieszczony w kodzie HTML.

Jako przykład, użyjemy listy nazwisk. Nazwiska oznaczone są znacznikiem <li> (list-item). Powiedzmy że chcemy aby nazwiska i imiona zapisane były z pierwszej dużej litery a nagłówki zaprezentować całe tylko dużymi literami.

Popatrz na kod HTML dla tego przykładu i zobaczysz że tekst jest cały umieszczony małą literą.

h1 {
	text-transform: uppercase;
}

li {
	text-transform: capitalize;
}