There are a lot of websites using a extra <span>-tag for the drop cap. But using the :first-letter pseudo-element, you can easily create nice drop caps with CSS. :first-letter will - how surprising - target the first letter of an element. This pseudo element is included in CSS 1, so the browser support is very good. It’s supported by IE5+, Let’s design some nice drop caps with CSS.
Designing
Unfortunately you can only apply a limited amount of properties to a first letter. According to w3schools only font, color, background, margin, padding, border, float and some other properties can be applied. Still you can make a nice drop cap with CSS.
I used this CSS code:
p:first-letter {
display:block;
float:left;
border:1px solid black;
padding:5px;
margin:4px 5px;
background:url(firstletter1.png);
font-size:73px;
}
This image of Wikipedia Commons was used for the background image. Click here to view the example page.
I have some issues with this in Opera: the background doesn’t have the same height as the text. I don’t really know how to fix this, because there is no way to specify the height of the first letter in CSS. It works good in all other major browsers.
- Skylog » Blog Archive » links for 2008-04-07
- Using CSS to Do Anything: 50+ Creative Examples and Tutorials
- Utiliza CSS para crear letras capitales
- Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design
- Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design
1
Alternatively, leave the background image off and style it dynamically in the html via php, then you can have 26 letter images in a folder and no matter what the first letter is it’s called correctly
2
u can use line-height instead of height
3
Cameron, I was thinking about PHP too, maybe I’ll make a php script and write another post about it.
hop, I should try that, it didn’t make any difference in Firefox though, when I was designing it.
4
What if you only want the first paragraph within a group of paragraphs to include the drop caps. Would I wrap the first paragraph within a special div class called “firstP” or something and then apply the style to .firstP p:first-letter {
Would that work?
5
That would work… but you could also give the first paragraph a class or use adjacent sibling selectors. You don’t have to add extra markup that way. Like this :
p:first-letter {display:block;
float:left;
border:1px solid black;
padding:5px;
margin:4px 5px;
background:url(firstletter1.png);
font-size:73px;
}
p + p:first-letter {
display:inline;
float:none;
border:none;
padding:0;
margin:0;
background:none;
font-size:inherit;
}
That should do the trick..
I also wrote an article about adjacent sibling selectors:
http://www.onyx-design.net/weblog2/css/css-adjacent-sibling-selector/
6
I am confused - how does this work in IE6 when http://kimblim.dk/csstest/ 1) claims it does not work in IE6 2) I pulled up IE6 and it really, really does not work. Yet your example works in IE6.
Is it that IE6 cannot process a page with a class name? The linked example applies the style to #ex9 p.doit:first-letter{font-style:italic}. The linked example does work in other browsers, just not IE6.
I have avoided this in the past explicitly for its lack of IE6 support. I am so confused by this inconsistency.
7
@fabian: this morning I red your article and liked it very well and now in combination with this trick it comes fully to it’s right. I think this is a perfect practice of the technique. So to both of you: thanks
8
@Edwin, thanks!
@Jennifer, I know the reason that it doesn’t work in IE6 sometimes. If you don’t add the space between the selector and the brackets, it won’t work in IE6.
This doesn’t work in IE6:
#ex9 p.doit:first-letter{font-style:italic}This code does IE6:
#ex9 p.doit:first-letter {font-style:italic}See:
http://www.satzansatz.de/cssd/pseudocss.html#first-letter and
http://www.webmasterworld.com/css/3123400.htm
9
Fabian,
Thank you for the clarification and links. According to those resources, this rule is true of :first-line as well. Life is now full of possibilities.
10
You’re welcome!
11
I’ve noticed something strange happening when I try to implement text-only drop caps using the :first-letter pseudo-element and was wondering if anyone could verify. It seems that if I don’t make adjustments to margin and padding, it lines up perfectly in Safari for Mac, but in Firefox for Mac (versions 2 and 3RC) the vertical alignment is messy. If I adjust for Firefox, Safari is misaligned. I don’t have a PC to test in IE; does anyone know how the vertical alignment works in IE?
12
Hello! I liked your blog and benefited from your posts. I’ll be very interested in your further posts. Thanks.