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 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; }
Kat: CSS Tricks, Labs Tarih: 5 Eylül 2019 Okunma:362
Paylaş:
Henüz yorum eklenmemiş.