Drop Cap Effect

Unlike the effects discussed in previous articles this effect is pure aesthetics. You might have seen this effect in magazines and books where the first letter of the article is enlarged and the content is laid on the right side of the enlarged letter. This effect is called drop-cap effect.

The same drop-cap effect can be added to web page with just HTML and CSS. There are many different styles in usage but I recommend the following two styles.

1. Magazine style

You can find more information of this style at “Magazine Style Drop Caps”.

2. Block Style

You can find more information of this style at “Alphabet Block Drop Caps”.

Note: Its not recommended to use this effect off-the-shelf. For much greater effect you might have to adjust the style to fit in with the style of the website.

-- by Santosh on January 25th, 2008