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ść:
Co znajdziesz w tym wpisie
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
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)
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.