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

Czas czytania: < 1 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

  • 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

W praktyce wygląda to następująco:

Przykład:
Tak przedstawia się nasz tekst przed wprowadzaniem zmian czyli z ustawieniem none. Jak widać posiadam tylko jedną wielką literę. Pozostałe są małe.

TEKST z właściwością none
TEKST z właściwością none

Zamiana wszystkich liter w akapicie na małe

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

TEKST z właściwością lowercase

<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. Wymusimy na tekście wielkie litery

TEKST z właściwością 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.

TEKST z właściwością capitalize

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)