Categories:

Adding drop caps effects to your paragraphs using CSS

Traditional print have long excelled the web when it comes to layout and presentation. Open up any magazine, for example, and fancy visual effects such as overlapping graphics, drop caps first letter, and watermark background abound. Today, we're going to bring one of those visual gaps between offline and online print closer together, by seeing how to use CSS2 to add drop caps effects to your paragraphs. It won't drop any jaws, but then again, the best and most practical effects shouldn't.

First thing's first- compatibility issue

Before all else, let's first discuss the dreaded compatibility issue. Drop capping using CSS2 is supported by IE 5.5+ and Firefox/NS 6 and up.

:first-letter pseudo element

Ok boys and gals, time to bring out our first star, the :first-letter pseudo element of CSS2. Identical in concept and application to other pseudo elements such as a:hover, this element allows us to bring out the first letter of a paragraph, but enlarging and/or floating the letter to the left. Check this out:

<style type="text/css">
.myparagraph:first-letter {
font-size:200%;
float:left;
color:blue;
}
</style>

<p class="myparagraph">Welcome to my great little corner on the web! Enjoy your stay...browsing around is free! Thanks, and remember, if you break it, you buy it!<p>


Example:

Welcome to my great little corner on the web! Enjoy your stay...browsing around is free! Thanks, and remember, if you break it, you buy it!

Inside the STYLE tag, we define the class "myparagraph", and suffix it with the code ":first-letter", and whatever declarations that follow will be applied to the first letter of that paragraph.

:first-line pseudo element

This is a first for web pages- bringing out the first line of a paragraph. Up until now, the effect was virtually unreplicable using plain HTML, due to the difficulty in manually determining when one line ends, and the second begins inside a paragraph. The :first-line CSS element takes care of this stumbling block, and correctly manipulates only the first line of the specified paragraph, regardless of user screen resolution or changes to the window's dimensions.

<style type="text/css">
.myparagraph2:first-line {
font-size:110%;
text-transform: uppercase;
font-weight:bold;
}
</style>

<p class="myparagraph2">JavaScript differs from most other programming languages in that it is relatively easy to master, even for people who have absolutely no programming experiences whatsoever.<p>

Example:

JavaScript differs from most other programming languages in that it is relatively easy to master, even for people who have absolutely no programming experiences whatsoever.

I purposely made the above paragraph one continuous text, without any explicit line breaks (<br>), to illustrate how the :first-line CSS element works- dynamically and automatically.

IE 6 pseudo elements bug

There is a major bug in IE6 with regards to pseudo elements that you should be aware of. Specifically, the above two pseudo elements will only work in IE6 if there is a space between the pseudo element and curly braces. For example:

WON'T work in IE6 due to bug:

<style type="text/css">
.myparagraph2:first-line{
font-size:110%;
text-transform: uppercase;
font-weight:bold;
}
</style>

Will work in IE6:

<style type="text/css">
.myparagraph2:first-line {
font-size:110%;
text-transform: uppercase;
font-weight:bold;
}
</style>

In the second example, there is a space between "first-line" and "{". Always do this to ensure your CSS works in IE6.