CSS Tricks, Labs

Drop Caps – Css ile İlk Harfi Büyük Yapmak

Birçoğumuz gazetelerde, sitelerde bu küçük, güzel özelliği farketmişizdir. Ben bu ilk harfi büyük yapmayı size 2 farklı yoldan göstereceğim. İlki: Cross-browser yolu ile yani ekstra markup kullanarak hedeflediğimiz tek harfe […]

yzr: Hakkı Cengiz
A+ A A- okuma

Birçoğumuz gazetelerde, sitelerde bu küçük, güzel özelliği farketmişizdir. Ben bu ilk harfi büyük yapmayı size 2 farklı yoldan göstereceğim.

İlki: Cross-browser yolu ile yani ekstra markup kullanarak hedeflediğimiz tek harfe odaklı kodla gerçekleşiyor.

İkinci yol ise: paragrafın tanımlı ilk harfi otomatik  buluyor ve büyütüyor. Bu ikinci yolun sakıncası şu ki tüm paragrafların ilk harfini seçebiliyor, sayfanıza göre belli değişik şeyler görebilirsiniz.

İlk Yol (ekstra html)


L orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada.


.firstcharacter { 
    float: left; 
    color: #903; 
    font-size: 75px; 
    line-height: 60px; 
    padding-top: 4px; 
    padding-right: 8px; 
    padding-left: 3px; 
    font-family: Georgia; 
}

İkinci Yol (CSS3)


L orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada.


p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
0 Yorumları: Yorum Formunu:

Henüz yorum eklenmemiş.

Bi yoruma ne dersin ?

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