CSS ilk harfi büyük (drop caps) nasıl yapılır?

CSS ilk harfi büyük (drop caps) nasıl yapabilirim?

CSS ilk harfi büyük paragraf nasıl oluşturulur?

resimdeki gibi bir yazım biçimini CSS ile yapabilir mi?

İlk harfi büyük yapma işi aslında dergilerde ve gazetelerde sık uygulanan bir yöntemdir. Genelde dergilerin ve gazete köşe yazılarının başlangıç paragrafının ilk harfi 2 veya daha fazla satır yüksekliğinde oluşturarak farklı ve güzel bir görünüm kazandırmaktadır. Bu durumu CSS ile yapabilmek mümkündür.

Biz bu şekilde görüntüleme işlemini first-letter seçicisi ile elde edebiliriz. Bu seçicinin diğer bir adı ise drop caps-ilk harfi büyük harf seçicisi diye geçmektedir. En büyük avantajı ie6 dahil tüm tarayıcıların bu özelliği desteklemesidir.

first-letter kullanımı
 

p{ 
    font-weight:bold; 
    font-size:18px;
}
p:first-letter
{
    color:#307891;
    font-size:400%;
}
<p>uzmanım.net</p>

 Kodumuzun çıktısı aşağıdaki şekilde olucaktır.

:first-letter seçicisini tanımlanabilen diğer özellikler listesi;

• font özellikleri
• color özellikleri
• background özellikleri
• text-decoration
• text-transform
• line-height
• margin özellikleri
• padding özellikleri
• border özellikleri
• float
• text-shadow
• clear

bu özellilerin tamamını :first-letter seçisin kullanabiliriz.