text-transform w CSS3

By /

CSS

Właściwość text-transform w CSS3 służy do zmiany wielkości liter tekstu w elementach HTML. Jest to potężne narzędzie, które pozwala na estetyczne modyfikacje tekstu bez konieczności zmiany oryginalnego tekstu w kodzie HTML. Możemy dzięki niemu kontrolować wyświetlanie tekstu, przekształcając go na wielkie litery, małe litery lub kapitaliki.

Przykład zastosowania text-transform

W poniższym przykładzie pokażemy, jak można zastosować różne wartości właściwości text-transform do tekstu w prostym dokumencie HTML. Nie będzie potrzeby używania JavaScript, gdyż zmiany dotyczą tylko CSS.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykład wykorzystania text-transform w CSS3</title>
    <style>
        .uppercase {
            text-transform: uppercase;
        }

        .lowercase {
            text-transform: lowercase;
        }

        .capitalize {
            text-transform: capitalize;
        }

        .none {
            text-transform: none;
        }
    </style>
</head>
<body>
    <p class="uppercase">To jest tekst w wielkich literach.</p>
    <p class="lowercase">To jest tekst w małych literach.</p>
    <p class="capitalize">to jest tekst z kapitalikami na początku każdego słowa.</p>
    <p class="none">Tekst bez zmiany wielkości liter.</p>
</body>
</html>

W tym przykładzie, za pomocą CSS, zmieniamy wygląd tekstu w czterech paragrafach (<p>), używając różnych wartości właściwości text-transform:

  • uppercase przekształca wszystkie litery na wielkie.
  • lowercase zmienia wszystkie litery na małe.
  • capitalize zmienia pierwszą literę każdego słowa na wielką.
  • none nie dokonuje żadnych zmian w wielkości liter.

Wartości właściwości text-transform

Właściwość text-transform przyjmuje następujące wartości:

  • none: Nie zmienia wielkości liter tekstu.
  • capitalize: Przekształca pierwszą literę każdego słowa na wielką literę.
  • uppercase: Przekształca wszystkie litery na wielkie.
  • lowercase: Przekształca wszystkie litery na małe.

Podsumowanie

Właściwość text-transform w CSS3 jest prostym, ale potężnym narzędziem, które pozwala na kontrolę wyglądu tekstu na stronie internetowej. Dzięki niej możemy łatwo dostosować prezentację tekstu do naszych potrzeb, poprawiając czytelność i estetykę witryny, bez konieczności modyfikacji oryginalnego tekstu w HTML. Jest to przykład, jak CSS pozwala na oddzielenie treści od prezentacji, co jest jedną z podstawowych zasad dobrego projektowania stron internetowych.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDeveloper w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

 

Powiązane artykuły

Scroll to Top