CSS’te text-transform özelliği, bir metnin büyük/küçük harf biçimini değiştirmek için kullanılır. HTML içeriğini değiştirmeden yalnızca görsel sunumu düzenler.

Görseldeki örnek metin:

<p>loreM ipsum</p>

1️⃣ text-transform: uppercase;

Metindeki tüm harfleri BÜYÜK HARF yapar.

p {
    text-transform: uppercase;
}

Çıktı:

LOREM IPSUM

Ne işe yarar?

• Başlık tasarımlarında
• Menü öğelerinde
• Buton yazılarında
• Dikkat çekmek istenen alanlarda

2️⃣ text-transform: capitalize;

Her kelimenin ilk harfini büyük yapar.

p {
    text-transform: capitalize;
}

Çıktı:

LoreM Ipsum

Not: capitalize, sadece kelimelerin ilk harfini büyütür. Mevcut büyük harfleri küçültmez.

Kullanım alanları:

• Blog başlıkları
• Ürün isimleri
• Liste öğeleri

3️⃣ text-transform: lowercase;

Metindeki tüm harfleri küçük harfe çevirir.

p {
    text-transform: lowercase;
}

Çıktı:

lorem ipsum

Kullanım alanları:

• URL gösterimleri
• E-posta adresleri
• Teknik dokümanlarda standartlaştırma

4️⃣ text-transform: none; (Varsayılan)

Metni olduğu gibi bırakır.

p {
    text-transform: none;
}

Çıktı:

loreM ipsum

text-transform Neden Kullanılır?

✅ HTML içeriğini değiştirmeden stil uygulamak için
✅ SEO uyumluluğunu korumak için
✅ Tasarım bütünlüğü sağlamak için
✅ Responsive tasarımlarda farklı görünümler oluşturmak için

Önemli nokta:
text-transform sadece görsel değişiklik yapar. HTML kaynağındaki metni değiştirmez.

Gelişmiş Kullanım Örnekleri

Butonlarda Kullanım

button {
    text-transform: uppercase;
    letter-spacing: 1px;
}

Modern arayüzlerde genellikle buton yazıları büyük harf yapılır.

Menü Tasarımı

nav a {
    text-transform: capitalize;
}

Menü öğelerini daha düzenli gösterir.

Responsive Örnek

@media (max-width: 600px) {
    h1 {
        text-transform: uppercase;
    }
}

Mobilde başlıkları daha dikkat çekici hale getirebilirsiniz.

SEO ve text-transform

Birçok kişi büyük harf kullanımı için HTML içinde metni değiştirir. Bu doğru bir yaklaşım değildir.

Yanlış:

<h1>WEB TASARIM DERSLERİ</h1>

Doğru:

<h1>Web Tasarım Dersleri</h1>

CSS ile:

h1 {
    text-transform: uppercase;
}

Bu yöntem:

• Daha temiz kod sağlar
• SEO açısından daha sağlıklıdır
• Erişilebilirliği artırır

Özet

Sonuç

text-transform özelliği, CSS’in en pratik ve en çok kullanılan metin biçimlendirme araçlarından biridir. Tasarım bütünlüğü, okunabilirlik ve profesyonel görünüm açısından oldukça önemlidir.

Özellikle modern web tasarımında butonlar, başlıklar ve navigasyon alanlarında aktif olarak kullanılmaktadır.