text-transform [CSS] – zmiana wielkości liter

Czas czytania: 2 minut

Właściwość text-transform (z języka ang. transformacja tekstu) jest jedną z popularniejszych metod modyfikacji tekstu. Zadaniem własności jest zmiana wysokość liter np. z małych na wielkie.  Przyjmuje ona następujące własność:

Jakie ustawienia posiada text-transform?

Domyślnie text-transform posiada 4 ustawienia są to następująco:

• none – (wartość domyślna ) litery w tekście pozostają nie zmienione, są takie jakie wprowadziliśmy je na stronę
• lowercase – zmienia wszystkie litery w tekście na małe
• uppercase – zmienia wszystkie litery na duże, wielkie czasami błędnie nazywane “drukowanymi”
• capitalize – pierwsza litera każdego słowa zostaje zamieniona na dużą

Z pewnością już wielokrotnie spotkaliście się z tą właściwością. Przykładowo nagłówek tego wpisu posiada ustawienie text-transform:uppercase; dlatego pisany jest wielkimi literami.

Jak działa text-transform

Z pewnością za dużo powyższy opis wam nie mówi. By go lepiej zrozumieć przejdźmy zatem do praktyki:

Przykład:

Domyślnie text-transform ustawiony jest na “none”. Przy takim ustawieniu tekst wyświetlany na stronie wygląda w taki sposób w jaki go wprowadziliśmy z klawiatury naszego komputera. Czyli tam gdzie użyliśmy dużych liter mamy duże litery a tam gdzie małych są małe.

TEKST z właściwością none

---

Zamiana wszystkich liter w akapicie na małe

Teraz przetestujemy cechę lowercase. Z jej pomocą zmienimy wszystkie litery w tekście na małe, nawet jeżeli wcześniej używaliśmy w tekście dużych liter. Ustawienie to bowiem transformuje litery w tekście na małe.

<p class="lowercase">TEKST z właściwością lowercase</p>

.lowercase {text-transform:lowercase;}

---

Zamiana tekstu na wielkie litery

Skoro mieliśmy już same małe litery to tym razem zmienimy wszystkie na wielkie. By osiągnąć ten efekt zastosujemy wartość “uppercase”.

<p class="uppercase">TEKST z właściwością uppercase</p>

.uppercase {text-transform:uppercase;}

---

Zamiana pierwszej litery każdego wyrazu na wielką

Ostatnia opcja zmienia wszystkie pierwsze litery słów na duże litery. Dość istotny jest fakt, że pozostałe litery pozostają bez zmian. Czyli jeśli były wielkie lub małe nadal takie są, manipulujemy jedynie pierwszą literą każdego wyrazu.

Jak to wygląda w HTML

<p class="capitalize">TEKST z właściwością capitalize</p>

.capitalize {text-transform:capitalize;}

Jak widzicie zmiana wielkości liter z pomocą CSS jest bardzo prosta i nie wymaga specjalnie dużo pracy. Nie trzeba niczego przepisywać. Dlatego też metoda ta oszczędzi nam dużo czasu.

dodatkowe tagi:

wymuszanie tekstu wielkimi literami css, same małe głoski w tekście na stronie internetowej, drukowane litery (błędne nazewnictwo)