css html
💻 Bilgisayar

CSS ile Harf Dönüşümü

1 dakika

CSS & HTMLSunucu taraflı bir dil ve JavaScript kullanmadan belirli bir ID ya da Class’a (sınıf) CSS özelliği atayarak bu özelliği kullanan metinlerin tamamını küçük harfe, büyük harfe ya da ilk harfleri büyük hale getirmeniz mümkün.

(Az önceki satır, aşağıdaki gibi, CSS sınıfları ile biçimlendirilmiştir)

Sunucu taraflı bir dil ve JavaScript kullanmadan belirli bir <em>ID</em> ya da <em>Class</em>’a (sınıf) CSS özelliği atayarak bu özelliği kullanan metinlerin tamamını <span style="text-transform: lowercase;">küçük harfe</span>, <span style="text-transform: uppercase;">büyük harfe</span> ya da <span style="text-transform: capitalize;">ilk harfleri büyük hale</span> getirmeniz mümkün.

.sinif, #id {
	text-transform: lowercase; /* Hepsi küçük harf */
	text-transform: uppercase; /* Hepsi büyük harf  */
	text-transform: capitalize; /* İlk harfler büyük */
}

Neden bu özelliği kullanmalıyım?

CSS ile stillendirdiğiniz için, sunucudan gelen dosyada değişiklik yapmanıza gerek kalmaz. Siz İzmir bile yazsanız, bunu sadece bir CSS sınıfıyla İzmir haline getirebilirsiniz. Yazıcı dostu sayfalar için ayrı stil sayfaları kullanarak, sayfayı yeniden yükletmenize gerek kalmadan, yazıcının tamamı büyük harf olmayan, yazıcıda daha hoş durabilecek bir sayfa yazmasını sağlayabilirsiniz.

Arama motorları ve robotlar sitenizi büyük küçük harf kurallarına uygun olarak görür. Stil sadece bir maske görevi oynadığından alttaki yazı hep aynıdır.

Bir arıza nedeniyle stil sayfası yüklenemediğinde, tamamı büyük ya da küçük harf görünen metinler can sıkıcı olabilir. Ama CSS stili yüklenmediğinde siteniz düz yazıya döner.

👋 🚨 Yeni yazılardan haberdar olmak ister misiniz? 👇
Etiketler

Bunlar da ilginizi çekebilir

CSS ile Harf Dönüşümü 19 yorum aldı.

  2. text-transform:capitalize türkçe karakterlerde sorun çıkarıyor.

    w3C'nin sitesindeki test güya başarılı ama sağdaki küçük i büyük İ'ye dönüşmüyor. Buna da bir cevap ver şimdi.

    Cevap yaz

  4. bir konuda yardımını isteyecektim http://www.haberkaynagi.com/ haber sitesini deneme amaçlı başlattım da manşet bölümünde imagelerin üstüne gelen başlıklar büyük harf fakat yazıya küçük harf giriliyor uppercase komutuyla büyük harfe çeviriyoruz css de ancak İzmir i İZMIR diye büyütüyor küçük "i" leri büyük "I" yapıyor büyük "İ" yapmak için ne yapmam lazım. fontum türkçe karakteri destekliyor.
    kodda şöyle:
    h3.ticker-header {
    background: url(images/ticker-bg.png) no-repeat right center;
    color: #fff;
    float: left;
    font: 700 20px/20px 'Oswald', sans-serif;
    max-width: 155px;
    height: 20px;
    padding: 10px 25px 10px 20px;
    text-transform: uppercase;
    }
    çözümü varsa yardımcı olursan sevinirim.

    Cevap yaz

    1. Maalesef bu tarayıcı ile ilgili bir durum. Tarayıcılar Türkçe'yi takıp destek vermediği sürece yapabileceğiniz bir şey bulunmamakta. :/

      Cevap yaz

      1. Evet haklısınız İE düzgün gözüküyor diğer tüm tarayıcılarda chrome ff seamonkey chromium canary vs hepsinde buyuk İ yapmıyor teşekkürler. yaşasın MİCROSOFT demekten başka birşey yok yani. cevap için teşekkür.

  5. Türkçe karakterler "uppercase" ile büyük çevrildiğinde sorun çıkarıyor ama bir sitede bu yok. http://www.listelist.com

    burada da uppercase kulanılmış ama -i- harfinde hiçbir sorun yok. Mutlaka bir yolu olmalı. Siteyi inceledikten sonra bir fikriniz olur mu? Cevap bekliyorum.

    Cevap yaz

  6. adamım soru sordum neden kaldırdın yorumumu? cevap bekliyordum senden. listelist reklamı yapıyor değilim.

    Cevap yaz

    1. Yorumunuzu kaldırmadım. Listelist'in sitesinde uppercase'li bir örnek göremedim. Bulabileceğim tam bir adres gönderir misiniz?

      Cevap yaz

  8. text-transform: none; yaptım doğru mu bilmiyorum ama ne şekilde yazarsanız o şekilde görünür oluyor. Deneme yanılma mantığı 🙂 yazı için teşekkürler.

    Cevap yaz

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir