CSS ile büyük küçük harf dönüşümü (text-transform) nasıl yapılır?

CSS ile büyük/küçük harf dönüşümü (text-transform) nasıl yapılır?

CSS ile metni tümünü büyük harf yapabilirmiyim?

CSS ile metni tümünü küçük harf yapılabilir mi?

CSS text-transform nedir? nasıl kullanılır?

CSS ile büyük küçük harf dönüşümü text-transform ile yapılabilmektedir.

text-transform : element içinde kullanılanılan metnin gösterilme biçimini belirlemek için kullanılmaktadır.

text-transform özelliğinin alabildiği değerler ise şunlardır;

• none : Metin değiştirilmez. (Varsayılan değer)
• capitalize : Metindeki her kelimenin ilk harfi büyük gösterilir.
• uppercase : Metindeki tüm harfler büyük gösterilir.
• lowercase : Metindeki tüm harfler küçük gösterilir.

text-transform Kullanımı

Metni büyük harflerle yazmak için;

.buyukharf{
    text-transform:uppercase;
}
<p class="buyukharf"> uzmanım.net </p>

Kodun çıktısı UZMANIM.NET şeklinde olacaktır.

Metni küçük harflerle yazmak için;

.kucukharf{
    text-transform:lowercase;
}
<p class="kucukharf"> UZMANIM.NET </p>

Kodun çıktısı uzmanım.net şeklinde olacaktır.

Metni ilk harfleri büyük yazmak için;

.ilkharfbuyuk{
    text-transform:capitalize;
}
<p class="ilkharfbuyuk"> uzmanim.net </p>

Kodun çıktısı Uzmanım.net şeklinde olacaktır.