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

kursy, tutoriale

Kategoria wpisu Kurs CSS, Kursy Tagi: , , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

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:

TEKST z właściwością none

TEKST z właściwością lowercase

TEKST z właściwością uppercase

TEKST z właściwością capitalize

Jak to wygląda w HTML

Jak widzicie zmiana wielkości liter z pomocą CSS jest bardzo prosta i nie wymaga specjalnie dużo pracy.