kursy, tutoriale

Transformacja tekstu na stronie internetowej – text-transform [CSS]

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

Teraz zmienimy przetestujemy cechę lowercase. W ten sposób zmienimy wszystkie litery na małe.

TEKST z właściwością lowercase

<p class="lowercase">TEKST z właściwością lowercase</p>
.lowercase {text-transform:lowercase;}

Skoro mieliśmy już same małe litery to tym razem zmienimy wszystkie na wielkie.

TEKST z właściwością uppercase

<p class="uppercase">TEKST z właściwością uppercase</p>
.uppercase {text-transform:uppercase;}

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.