Drop Cap Effect w/ :first-letter – CSS3 Tutorial

Video

1. Place The HTML And Text

We must first place a few lines of text. I’m going to jump over to http://html-ipsum.com and grab three of the long paragraphs and just change the first word of each paragraph so there is a little variety.

2. Write The CSS3

There is a pseudo element in CSS3 called “:first-letter” which allows us to target and style the first letter of the targeted tag. We will start by targeting the first-letter of any <p> tag.
[code type=”css” title=”Code”]p:first-letter {

}[/code]

3. Set Aside First Letter

The very first thing we will do with CSS3 is display our first letter as a block level element which will allow us to really control the width, height, margin, and padding if we like. My code (This will not make much visual difference):
[code type=”css” title=”Code”]p:first-letter {
display:block;
float:left;
}[/code]

4. Set The First Letter Size

Next we want to increase the size of the type based on the size of the surrounding type and by setting a creative line-height we will align the top of our dropped letter with the top of our normal type. My code:
[code type=”css” title=”Code”]p:first-letter {
display:block;
float:left;
font-size:3em;
line-height:0.9em;
}[/code]

5. Padding

Adding 10px of padding to the left and right of our letter helps pull it away from the rest of the letters a little bit. We like this. My code:
[code type=”css” title=”Code”]p:first-letter {
display:block;
float:left;
font-size:3em;
line-height:0.9em;
padding:0 10px;
}[/code]

6. Color!

The finishing touch will be to add a dash of color and maybe even make these letters bold to really set them apart from the body type. My code:
[code type=”css” title=”Code”]p:first-letter {
display:block;
float:left;
font-size:3em;
line-height:0.9em;
padding:0 10px;
color:#bf253c;
font-weight:bold;
}[/code]

7. Enjoy!

Follow Me On Twitter!

Like Tutvid on Facebook!