SHARE

How To Use CSS3 To Create Drop Caps

Written By

Dec 14, 2011

Introduction

Drop caps are a formatting tool that is rarely used these days. They were most popular in print productions and are not seen very often on websites. There could be any number of reasons why, but special formatting and coding considerations are the most likely reasons for the lack of use online.

I use Joomla for my own site, and Joomla’s text editor does not have a drop cap format button even though there are buttons to easily create subscript and superscript, and I’m hard pressed to think of a time when I used those buttons. When I hand coded my own static HTML site, if I wanted to create drop caps, I had to throw in a special format tag.

I understand that the :first-letter selector has been around for a few years, but I have to admit that I’ve never used it. I recently discovered some code, however, that shows how to use the :first-letter selector along with first-child and some CSS3 shadow effects to create a drop cap effect. Using this combination of code will allow you to have a stylish drop cap effect without having to constantly add special tags to make it function.

The code featured in this article was originally written by Chris Spooner, and you can view the demo here.

Show Us The Code!

Here is the HTML that is used, and it does make use of some of the features of HTML5:

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>CSS Drop Shadow</title>

</head>

<body>

<div>
You either die a hero or you live long enough to see yourself become the villain.
</div>

</body>
</html>

The best part about this code is what you don’t see. When I used to hand code my old static site, I would have to write out the code like this for each and every drop cap, where ‘introduction’ was my style name for the drop cap, as seen below:

D

Typing in that extra line of code got old pretty quickly, but the outcome still looks nice. That’s why I’m giving this CSS3 drop cap effect some attention. Now for the CSS code.

p {
    font-size: 50px; line-height: 80px;
    text-transform: uppercase;
    text-shadow: 10px 10px 0 rgba(255,255,255,0.07);
}

The above code shows how Chris styled his paragraphs. Take note that he transformed all of the text to be uppercase. That’s a neat bit of code to know, but I’m not sure how often you’ll want to use it in everyday text. Perhaps you might want to use it for callouts, in that case, the shadow effect would also look nice.

This next bit of code is crucial for the drop cap to work successfully. In addition to using first:letter, you must also use first-child. This will prevent the drop cap effect from happening for each and every paragraph. The first-child element keeps the drop cap to only the first letter of the first paragraph on each page. You want to use the drop cap effect and not over use it.

p:first-child:first-letter {
font-size: 160px; float: left; margin: 20px 20px 0 0; line-height: 0.8;
}

The 160px size might sound huge compared to the paragraph size of 50px, but you have to keep in mind that you want the drop cap to span a few rows. Otherwise, it wouldn’t be a very effective drop cap, would it?

Most drop caps do have a touch of special formatting to offset it from the rest of the text. In this demo, Chris added a shadow to the drop cap for that special touch.

p:first-child:first-letter {
font-size: 160px; float: left; margin: 20px 20px 0 0; line-height: 0.8;;
text-shadow: 4px 4px 0 #566074, 7px 7px 0 #fff;
}

Conclusion

That’s all there is to it. A few lines of code and you have an automatically formatted drop cap for the first paragraph of each page. My suggestion is to go ahead and use it. It’s special touches like this that separate the ho-hum sites from those whose creators really care about how text is formatted and how their site is presented.

How To Use CSS3 To Create Drop Caps

Introduction

Show Us The Code!

Conclusion

Michael Rohde

Recommended for you...

Company

Categories