Monday, May 26, 2008

How to use Drop Caps on your blog or website

>

What is a Drop Cap?

A Drop Cap is a layout style in which the first letter of a paragraph is enlarged and dropped down two or more lines in the paragraph. Drop caps are often seen at the beginning of novels and magazines, where the top of the first letter of the first word lines up with the top of the first sentence and drops down to the four or fifth sentence. Drop Caps add a nice visual touch to the page.


We can apply drop caps in blogs and websites too using a simple CSS trick.

Copy the following code and paste it in your blog or website

<p><span style="padding-left: 2px; font-size: 70px; background: #f8d456; float: left; padding-bottom: 2px; color: #ffffff; line-height: 55px; margin-right: 5px; padding-top: 2px; font-family: times; paddin-right: 2px">T</span>his paragraph is using drop caps. Notice how it looks like a magazine now. The font size, padding, line height, color etc will need to be adjusted according to the looks of the page. The values I used are for this page only and will rarely work with another page with different font types and line heights. </p>

It will look like this

This paragraph is using drop caps. Notice how it looks like a magazine now. The font size, padding, line height, color etc will need to be adjusted according to the looks of the page. The values I used are for this page only and will rarely work with another page with different font types and line heights.

Instead of copying the whole style code into the post each time you apply a drop cap, you can add the codes to your style sheet. Just add these lines to the style.css file of your webpage:

.dropcap  {
float:left;
color: #ffffff;
font-size:70px;
line-height:55px;
background: #f8d456;
padding: 2px 2px 2px 0;
margin: 0 5px 5px 0;
font-family: Times, serif, Georgia;
}

Replace the values in the code above with your own values which you can find out through trial and error. It's important that the font you use for the first letter is different from the font of the rest of your page. After that just add the following code each time you want to insert a drop cap:

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

[via MandarinDesigns]

1 comment:

  1. Thanks so much for providing this code. Sometimes it's the little details that are huge.

    ReplyDelete

Popular Posts