CSS'de text-transform Özelliği | 𝗣𝗥𝗢𝗧𝗢𝗧𝗨𝗥𝗞

CSS text-transform Özelliği

CSS1

Harflerin büyük-küçük dönüşümünü sağlamak için bu özellik kullanılır.

Yapısı (Syntax)text-transform: uppercase | lowercase | capitalize;

Varsayılan Değer	none
JavaScript Yapısı	`object.style.textTransform="uppercase"`
Animasyon Özellikleri Uygulanabilir	Hayır (Daha fazla detay)

Değerler

Değer	Açıklama	Versiyon
none	Metin olduğu gibi gösterilir. Varsayılan değerdir.	CSS1
capitalize	Her kelimenin ilk harfini büyük harfe dönüştürür.	CSS1
uppercase	Tüm karakterleri büyük harfe dönüştürür.	CSS1
lowercase	Tüm karakterleri küçük harfe dönüştürür.	CSS1

Örnekler

Her değer için bir örnek vermek gerekirse;

<div class="uppercase">küçük harflerle yazdık ama büyük görünecek</div>
<div class="lowercase">BÜYÜK HARFLERLE YAZDIK AMA KÜÇÜK GÖRÜNECEK</div>
<div class="capitalize">her kelimenin ilk harfi büyük görünecek</div>

<style>
.uppercase {
	text-transform: uppercase;
}
.lowercase {
	text-transform: lowercase;
}
.capitalize {
	text-transform: capitalize;
}
</style>

Editörde Görüntüle

Büyük İ ve küçük ı gibi karakterlerde büyük harfe ve küçük harfe çevirirken problem yaşayabilirsiniz. Bunun çözümü etiketinize ya da html etiketinize lang="tr" değerini eklemek.

<div class="uppercase">istanbul</div>
<div class="uppercase" lang="tr">istanbul</div>

<div class="lowercase">İSTANBUL</div>
<div class="lowercase" lang="tr">İSTANBUL</div>

<div class="capitalize">istanbul büyük şehir belediyesi</div>

<style>
    .uppercase {
        text-transform: uppercase;
    }
    .lowercase {
        text-transform: lowercase;
    }
    /* ne yazık ki bu hiçbir şekilde desteklemiyor */
    .capitalize {
        text-transform: capitalize;
    }
</style>

Editörde Görüntüle