- engindeniz.net - http://www.engindeniz.net/v3.0 -

İlk Harfi Otomatik Değiştirmek – 1

Merhaba
Gazetelerde, dergilerde yer alan yazılarda oldukça şık duran satır başındaki ilk harfin büyük ve farklı yazılmasını, sitemizde, blog sayfalarımızda kullanmak üzere faydalı-kısa bir kod olarak paylaşmak istedim.

Bu soruya seneler önce web tabanlı programlama ile oldukça hantal bir çözüm bulmuştum.
Her yazı öbeğinin ilk karakterini buluyor. Bunu div yada span etiketi içine alıyor ve fontunu büyütüyordum. Programlama hayatıma CSS girdikten sonra aynı sonuc için boşuna harcadığım zamana ve oluşturduğum kod yığınına üzülmüştüm.
Bu ilk yazımda basit ve kısa olan CSS çözümünü paylaşıyorum
İkinci yazımda ise biraz uzun, biraz teknik ve karışık ama daha farklı/görsel çıktı imkanı veren “jquery” çözümünü paylaşacağım.

Kısa çözüm kodlarımız


p:first-letter {
font-size:200%;
color:#8A2BE2;
}

“first-letter” direktifi, belirttiğiniz etiket içindeki karakterlerin ilkini vurguluyor
bu sayede harfe şekil verdirebiliyoruz
yukarıdaki kodumuzda <p> paragraf içeriğinde ilk karakterin rengini ve font büyüklüğüne karar verdik

şimdi “p” içine aldığımız her paragrafın ilk harfi belirttiğimiz renkte ve istediğimiz font büyüklüğünde olacaktır.

bu kodları blog sayfalarımızın CSS Style Sheet “.css” dosyalarına ekleyerek her paragrafta bu sonucu almamızı sağlayabilriz
Wordpress örneğini verirsem, her yazı “content” kimlikli bir div etitekinde yayınlanıyor
bu nedenle tüm wordpress sayfamızın etkilenmemesi için .css dosyasına eklerken

#content p:first-letter {
font-size:200%;
color:#8A2BE2;
}

şeklinde yaparsak tüm sayfa yerine sadece post edilen yazının etkilenmesini sağlarız
Özellikle kendi template’inizi yapıyorsanız kendinize özel, orjinal tasarımlar içinde kullanabilirsiniz
Sanıyorum bu biraz detay bir bilgi oldu, aslında bu aşamada deneme yanılma yaparak aradaki farkı görmek sanırım daha faydalı olacaktır.

Yukarıdaki küçük detayı atlayarak ilk örnek için temsili bir HTML yazılımı veriyorum

<h2>Tuncay Terzihanesi - Sunay Akın</h2>
(Kitaptan Çok Sevdiğim Kısa Bir Alıntı)
<p>Trabzon’un en ünlü terzilerindendi Tuncay Bey... Dükkânının rafları aldığı siparişlerin kumaşlarıyla doluydu. Genç adam modayı takip eden, yenilikçi biri olduğu için onun diktiği bir elbiseye sahip olmak isteyenler, araya hatırı sayılan insanları koyarlardı: “Şu bizim komşunun mantosunu bir zahmet sıkıştırıver!..”
</p>
<p>
Kedilerinin pençelerinin balık koktuğu bu kentte, bir gün, on yedi yaşında bir genç kız girer Terzi Tuncay’ın dükkânından içeri. Yanında annesi, elinde ise bordo renkli bir kumaş vardır. Kendisine bir ceket dikmesini ister genç terziden. Aşk tanrısı Eros’un attığı ok Tuncay Bey’in kalbini delmeden önce, içeri giren genç kızın güzelliği karşısında, tuttuğu iğne eline batmıştır çoktan!
</p>
<p>
Terzi Tuncay genç kızı provaya çağırmaya başlar. Hem de yalan yere ve kaç kere!.. Hatta bir seferinde şu türküyü bile mırıldanır, hafiften: <br>
Sen yağmur ol, ben bulut
Maçka’da buluşalım
</p>
<p>
Ölçü iyice alınmıştır!.. Bordo renkli ceket tamamlanır sonunda.

Üç tane düğmesi vardır bordo ceketin... İşte ben, o ceketin ortanca düğmesiyim (...)</p>

çok sevdiğim bir kitaptan alıntıdır:)
çıktısı ise şöyle:

Tuncay Terzihanesi – Sunay Akın

Trabzon’un en ünlü terzilerindendi Tuncay Bey… Dükkânının rafları aldığı siparişlerin kumaşlarıyla doluydu. Genç adam modayı takip eden, yenilikçi biri olduğu için onun diktiği bir elbiseye sahip olmak isteyenler, araya hatırı sayılan insanları koyarlardı: “Şu bizim komşunun mantosunu bir zahmet sıkıştırıver!..”

Kedilerinin pençelerinin balık koktuğu bu kentte, bir gün, on yedi yaşında bir genç kız girer Terzi Tuncay’ın dükkânından içeri. Yanında annesi, elinde ise bordo renkli bir kumaş vardır. Kendisine bir ceket dikmesini ister genç terziden. Aşk tanrısı Eros’un attığı ok Tuncay Bey’in kalbini delmeden önce, içeri giren genç kızın güzelliği karşısında, tuttuğu iğne eline batmıştır çoktan!

Terzi Tuncay genç kızı provaya çağırmaya başlar. Hem de yalan yere ve kaç kere!.. Hatta bir seferinde şu türküyü bile mırıldanır, hafiften:

Sen yağmur ol, ben bulut
Maçka’da buluşalım

Ölçü iyice alınmıştır!.. Bordo renkli ceket tamamlanır sonunda.
Üç tane düğmesi vardır bordo ceketin… İşte ben, o ceketin ortanca düğmesiyim (…)

çok hoş oldu değilmi? :)

İkinci yazıda görüşmek üzere

sevgiler

Be Sociable, Share!
  • [1]
  • [2]
  • [3]
  • [4]