Magazine Style Drop Caps

Dropcaps like in a fancy magazine is what you see in this post. I saw instructions for this trick at Mandarin Design and I wanted to share this beauty with you all.

It is done by putting the first letter of your post within <span>-tags, with a class named "dropcaps". In your CSS-definitions, you can set this first letter to Very Big, and in a different color. I use the following CSS-definition:

.dropcaps { float:left; color: $headerBgColor; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

In your post, the first letter is inside a span like this: <span class="dropcaps">D</span>. The result is very nice: a large capital that stretches over 5 lines.