CSS Drop Caps

Drop caps adalah huruf besar yang ukurannya mungkin 10 kali lipat huruf biasa yang diletakkan di awal artikel, CSS Drop Caps 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; 
}

CSS 3

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

Alfa Adhitya Member since December 18, 2019

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