CSS Lastnost: text-transform

Lastnost text-transform nadzira uporabo velikih in malih črk v besedilu. Omogoča različne načine preoblikovanja besedila:

none - besedilo ostane nespremenjeno
uppercase - pretvori vse črke v velike črke
lowercase - pretvori vse črke v male črke
capitalize - pretvori prvo črko vsake besede v veliko črko
full-width - pretvori znake v širše različice (predvsem za azijske pisave)
full-size-kana - pretvori vse kana znake v polno velikost (za japonsko pisavo)

Ta lastnost je posebej uporabna pri oblikovanju naslovov, navigacijskih menijev in poudarjanju besedila, ne da bi spreminjali izvorno HTML kodo.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>text-transform</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        * {
            box-sizing: border-box;
        }
        .vsebovalnik {
            max-width: 100%;
            color: #333333;
            margin: 20px auto;
            padding: 20px;
        }
        .primer {
            background: #f8f9fa;
            border-radius: 8px;
            margin-bottom: 15px;
            padding: 20px;
        }
        .primer p {
            font-size: 18px;
            margin: 10px 0;
            padding: 10px;
            background: white;
            border-radius: 4px;
            border-left: 4px solid #3498db;
        }
        .koda {
            font-family: monospace;
            color: #666;
            font-size: 14px;
            margin-top: 5px;
        }
        p.brez {
            text-transform: none;
        }
        p.velike-crke {
            text-transform: uppercase;
        }
        p.male-crke {
            text-transform: lowercase;
        }
        p.prva-velika {
            text-transform: capitalize;
        }
        p.polna-sirina {
            text-transform: full-width;
        }
        p.polna-kana {
            text-transform: full-size-kana;
        }
    </style>
</head>
<body>
    <div class="vsebovalnik">
        <div class="primer">
            <p class="brez">Primer običajnega besedila brez transformacije.</p>
            <div class="koda">text-transform: none;</div>
        </div>

        <div class="primer">
            <p class="velike-crke">To besedilo bo prikazano z velikimi črkami.</p>
            <div class="koda">text-transform: uppercase;</div>
        </div>

        <div class="primer">
            <p class="male-crke">TO BESEDILO BO PRIKAZANO Z MALIMI ČRKAMI.</p>
            <div class="koda">text-transform: lowercase;</div>
        </div>

        <div class="primer">
            <p class="prva-velika">vsaka beseda se bo začela z veliko črko.</p>
            <div class="koda">text-transform: capitalize;</div>
        </div>

        <div class="primer">
            <p class="polna-sirina">Besedilo v polni širini (Full Width)</p>
            <div class="koda">text-transform: full-width;</div>
        </div>

        <div class="primer">
            <p class="polna-kana">ｆｕｌｌ-ｓｉｚｅ-ｋａｎａ てすと</p>
            <div class="koda">text-transform: full-size-kana;</div>
        </div>
    </div>
</body>
</html>

REZULTAT