CSS drop caps came up in a discussion with a co-worker the other day. I don’t use drop caps in web sites I design, but there’s really no reason why I shouldn’t.

Example

Here’s how you can create drop caps with CSS using the :first-letter pseudo-class:

The Code:

Demo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Different Styles

You can even spice it up by applying a background color so that it will be contained within a square.

The Code:

Demo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Browser Support

ie7 and aboveChrome 5 and aboveFire Fox 3 and aboveOpera 10.5 and aboveSafari 3 and above

The :first-letter pseudo class has good browser support working in all modern browsers. Not supported in Internet Explorer 6 and below.

Comments