Drop caps : large capital letter like magazine with CSS

You must have seen the large first letter of the beginning of the print text media. This is known as drop caps. Here is an example of drop caps:

(Image courtesy of the drop caps above: Corel official website)

 

Easy method to create Drop caps effect in WordPress

 

There are many CSS methods to create drop caps. We will use a cheat to use drop caps where ever you want, in any post. Yes, this method of drop caps should work on Blogger too.

The code is:

 

<span style=”float:left; Margin: 5px;font-size: 40px; font-weight: bold;”>T</span>he classical tradition was late to use capital letters for initials at all; in surviving Roman texts it often is difficult even to separate the words as spacing was not used either. This might become drop caps later. In the Late Antique period both came into in common use in Italy, the initials usually were set in the left margin (as in the second example below), as though to cut them off from the rest of the text, and about twice as tall as the other letters. This became drop caps later.

 

(Text courtesy : Wikipedia text on drop caps)

 

Result:

 

The classical tradition was late to use capital letters for initials at all; in surviving Roman texts it often is difficult even to separate the words as spacing was not used either. This might become drop caps later. In the Late Antique period both came into in common use in Italy, the initials usually were set in the left margin (as in the second example below), as though to cut them off from the rest of the text, and about twice as tall as the other letters. This became drop caps later.

 

More tips:

 

Along with the style of drop caps, you can use these advanced CSS text effects to enhance the effect more.

This Article Has Been Shared 8307 Times!

Facebook Twitter Google+ Pinterest