Magazines use the drop cap technique and CSS2 includes the first-letter pseudo class, but we want more control and we want to use use inline style so we are using a span to make the first letter of the paragraph big.

source: mandarin design

CSS

.dropcap
{
float:left;
color:#D4D4C7;
line-height:70px;
padding-top:2px;
font:100px Times, Georgia, serif;
}

HTML

<span class="dropcap">T</span>his starts with a dropcap.

Note that IE will cut the drop cap if line height is too small.

More at mandarin design, html dog and armen’s alpha design.

CSS

May7 08

Share it