Easy CSS Drop Caps

Easy CSS Drop CapsWhile I’m sharing techniques, here’s one I’ve been playing around with recently, for making simple CSS drop caps. Y’know, starting a written piece with a nice big letter…

Skip straight to the examples here: Example 1, Example 2.

I know this isn’t new, and can probably be achieved in a variety of ways. I do it by applying a class to the paragraph we want to apply the drop cap to, using the :first-letter CSS pseudo-class, like so:

The HTML:

<p class="dropCap">
	Ten years ago a crack
	commando unit was sent to
	prison by a military court
	for a crime they didn't
	commit...
</p>

The CSS

.dropCap:first-letter {
	float: left;
	padding: 4px 12px 4px 0;
	font-size: 400%;
	font-family: Georgia, Times;
	/* IE seems to need the following line */
	line-height: 1em;
}

So, we’re floating the first letter of the specified paragraph to the left, applying some padding and margins and of course making the font-size super big. The only cross-browser strangeness was that IE looked very odd until I added the line-height value, then all went well.

The result is demonstrated in Example 1. Screenshot:

Screenshot 1

If IE played nicely we could just add a style to the containing element such that the first paragraph would automatically have the drop cap style applied (using. :first-child:first-letter), but for now, we have to apply the .dropCap style to the paragraph manually. Such is life.

Now if you want to get fancy (and be somewhat tied to pixels and images) you can bring in a background image, as in Example 2. Here’s a screenshot:

Screenshot 2

The CSS I used looks like this:

.dropCap:first-letter {
	float: left;
	padding: 14px;
	margin: 4px 8px 8px 0;
	font-size: 480%;
	background: url(ornament.gif) no-repeat;
	font-family: Georgia, Times;
	/* IE seems to need the following line */
	line-height: 1em;
}

Pretty simple and not a lot of code for a nice effect…

6 comments

  1. Looks great! Thanks for the tip.

  2. Now if only I could think of a use for that!

  3. Ha ha… i remembered I used a drop cap thing on one of my posts, and went back to see how i did it – floated right image of the letter! Ooops.

    I didn’t know about the selector first-letter – what other pseudo-class selectors are there (that work in ie too!)?

  4. Ah the old floated (*left*) image drop cap trick. I know it well.

    :first-letter and :first-line work in just about everything from IE 5 up.

    :before, :after and :first-child don’t.

  5. Красивый сайт мне понравился !

  6. Спасибо