CSS Drop Caps

alfa6661
- February 22, 2012
0 (0 votes)
Rate :
Membuat CSS Drop Caps atau huruf kapital pada karakter pertama

Drop caps adalah huruf besar yang ukurannya mungkin 10 kali lipat huruf biasa yang diletakkan di awal artikel, Drop Cap pada artikel sering kita jumpai pada majalah, tabloid, dan atau bacaan offline lainnya.

Contoh

extra markup

Memberikan tag class pada huruf pertama pada paragraf dengan tag span

HTML

<p><span class="dropcaps">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia.</p>

CSS

.dropcaps { 
    float: left; 
    font-size: 75px; 
    line-height: 60px; 
    padding: 4px 0 8px 3px; 
}

CSS3

Target karakter pertama dari paragraf pertama dengan menggunakan pseudo class selectors

p:first-child:first-letter { 
    float: left; 
    font-size: 75px; 
    line-height: 60px; 
    padding: 4px 0 8px 3px; 
}

Kode CSS di atas di tujukan pada element p anak pertama, dan pada huruf pertama dari element p tersebut

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia.</p>

Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter

– Eric S. Raymond

Have a better explanation?

If you have comments about this post. Please write your comments below

No comments associated with this article