Css ile metnin ilk harfini düzenlemek

Şahsi görüşüm, içeriğin önemi kadar tasarımın da gerekliliğinden yana. Göze hoş gelmeyen, bilhassa yorucu bir düzenlemeye sahip yazılar kullanıcılar tarafından hoş karşılanmayan durumlara sebep oluyorlar. Gerek arkaplan, gerek yazı fontunun büyüklüğü, rengi, stili gibi faktörlerin yanında paragraf yapısı da tasarımı ve dolayısıyla okunabilirliği etkiliyor.

Dekoratif bir yazı biçimi oluşturarak yazılarınızın okunabilirliğini artırabilir ve metnin tasarım açısından şık durmasını sağlayabilirsiniz.

Örneğin; gazete, dergi, kitaplarda karşılaştığımız, yazının ilk harfinin büyük halde yazılması olayını basit bir şekilde css ile halledebilirsiniz.

Bunu yapmak için şu adımları izlemeniz yeterli. Unutmayın ki düzenleyeceğiniz dosyaların önce mutlaka yedeklerini alın.

Bu benim kullandığım şekil, istediğiniz gibi değiştirebilirsiniz.
Css’de yer alan kodları inceleyecek olursak, first-child ilk elementi seçmenizi sağlarken first-letter ile ilk harfi seçiyoruz ve devamında ilk harfi düzenleyen css kodlarını kullanıyoruz. Hayal gücünüzü kullanarak verimli sonuçlar elde edebilirsiniz. First-letter özellliğini ilk öğrendiğimde aklıma first-word kullanmak geldi ama maalesef css’de böyle bir özellik bulunmuyor. Onun yerine first-line kullanılabilir halde. Ayrıca daha ayrıntılı bilgi için wordpress pseudo elements yazılarını inceleyebilirsiniz. Standart css kalıplarının dışına çıkarak daha kaliteli sonuçlara ulaşabilir ve kendinizi geliştirebilirsiniz.

Öncelikle metnin yer aldığı div adını belirleyelim. Mesela “metin” div’inde yer alıyor özet içeriğimiz.

<div class="metin">
<?php the_excerpt(); ?>
</div>

Css’mize şu kodları ekliyoruz.

.metin p:first-child:first-letter {
float:left;
font-size:25px;
color: #000000;
margin-right:0.07em;
font-style: italic;
font-family:Times New Roman;
line-height:90%;
}

Kenan CANOL

Google sayfama göz atabilirsiniz.

2 yorum

  1. Tahsin   •  

    Kodladığım tasarımlarda kullanabilirim bunu, hoş görünüyor. Teşekkürler 🙂

    • Kenan CANOL   •     Yazar

      keyifli kullanımlar tahsin (:

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir