Nice Drop caps with CSS

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.


TRACKBACKS (9)

  1. Skylog » Blog Archive » links for 2008-04-07
  2. Using CSS to Do Anything: 50+ Creative Examples and Tutorials
  3. Utiliza CSS para crear letras capitales
  4. Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design
  5. Using CSS to Do Anything: 50+ Creative Examples and Tutorials | SEO & Web Design
  6. WEB 3.0 » Blog Archive » ¿Así que querías saber (casi todo) de CSS?
  7. Selección de 19 tipografías en formatos vectoriales | Cosas sencillas
  8. » 50多个极富创意的CSS演示和教程 | 零食屋
  9. Using CSS to Do Anything: 50+ Creative Examples and Tutorials « Knowledge Articles

COMMENTS (15) / ADD YOUR OWN COMMENT

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

By Cameron on April 5th, 2008 at 10:04 pm

u can use line-height instead of height

By hop on April 6th, 2008 at 4:41 am

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.

By Fabian on April 6th, 2008 at 10:56 am

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?

By Rich on April 7th, 2008 at 6:16 pm

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/

By Fabian on April 7th, 2008 at 7:50 pm

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.

By Jennifer on April 8th, 2008 at 2:41 pm

@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 :)

By Edwin on April 8th, 2008 at 3:17 pm

@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

By Fabian on April 8th, 2008 at 3:51 pm

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.

By Jennifer on April 8th, 2008 at 6:04 pm

You’re welcome!

By Fabian on April 9th, 2008 at 7:54 am

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?

By Jackson on June 13th, 2008 at 9:06 pm

Hello! I liked your blog and benefited from your posts. I’ll be very interested in your further posts. Thanks.

By Hats on August 21st, 2008 at 10:23 am

Its great tutorials drop cap, could you post how to add for the code Drop cap letter in other to work on CMS Editor,
many thanks for share it.

By Joomla panel on January 28th, 2009 at 5:51 pm

I love CSS, but when will the browsers love CSS in a consistent fashion. I want to do the drop cap effect using advanced selectors h1 + p:first-letter but I’m sick of having to thing…oh wait, IE6 doesn’t support any advanced selectors, IE7 supports some but not all and so on…grrr. Angry web designer.

By Adam C on October 14th, 2009 at 1:25 pm

I wonder if it’s correct tu use a display block in an inline element as p!?

The solution proposed by Rich in his comment seems more correct…

Otherwise i like the idea of the background image, i never thought of that… thank you! :)

By stephane on November 30th, 2009 at 9:26 am

SPEAK / ADD YOUR COMMENT
Comments are moderated.

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Return to TopTo top

Posted on 04/05/08 to CSS, Featured.
Add your thoughts or trackback from your own site.