On May 26th, 2008 milburn wrote…

Drop Caps with Drop Shadows

It’s one of the most striking features of my blog, the crazy drop capitals with drop shadows. Not only that but I’ve come up with away to achieve this in all good browsers (unfortunately that doesn’t include IE) using only CSS and HTML. Let’s start with the markup.

<strong class="cap" title="I" ><span>I</span></strong>

Firstly I’ve created a “strong” element with a nested unsemantic “span” inside which contains our capital letter. The “strong” element has both a title and a class attribute, the title attribute is the important one because we can use it later to generate the shadow text.

To create a large capital we use:

strong.cap {
float:left;
color:#F00;
font-family:"Bookman Oldstyle",urwbookmanl,georgia,serif;
font-size:300%;
font-weight:bold;
line-height:1em;
margin-bottom:-0.4em;
position:relative;
}

This creates a bog standard drop cap by floating the letter left and making it bigger than the surrounding text. An adjusted bottom margin makes sure the text below wraps correctly.

strong.cap span{
display:block;
height:0pt;
position:relative;
right:0.06em;
top:-1.06em;
}
strong.cap:before{
content:attr(title);
color:#333;
}

The before pseudo-class is used to generate text in modern browsers (except IE) This creates a letter before the span. Finally we need to overlay the two letters. We do this by making the span display as a block level element which pushes it onto a new line, the line-height has been set to 1em so we can push the span back over the generated letter by positioning it relatively up 1.06em and to the left 0.06em. The additional 0.06em creates a slight offset making it look like a drop shadow. Take a look at the demo.

Unfortunately IE doesn’t like it at all and so you need to put the CSS in a non-IE stylesheet. Just stick the CSS in a stylesheet called noie.css and put the following code in your existing stylesheet.

@import 'noie.css' screen;

Internet Explorer doesn’t like the media deceleration ‘screen’ and so doesn’t read the rule. Why not experiment with your own fonts and colours and see what you can come up with.

You can leave a comment, or trackback from your own site.

7 Responses to “Drop Caps with Drop Shadows”

  1. On July 1st, 2008 David Potter said…

    Very nice plugin. By the way, it actually works well with IE7. Don’t know about previous versions. It does look better in Firefox, but at least the drop-cap displays properly in IE.

  2. On July 12th, 2008 Larry said…

    I like this a lot, works well in Firefox. But ran it through IE6 and IE7,in squashed the first line, so had to disable it for now.I am not a php programer, so I am not exactly sure wht to do your instructions seem vague to me.

  3. On April 16th, 2009 David said…

    Thomas – Dropcaps plugin is absolutely brilliant! Thank you so much. One interesting tidbit. Link below has great visual/grid for dropcaps.

    http://safalra.com/web-design/typography/css-drop-caps/

    The one thing is I cannot figure out is how to implement the last CSS bit which is supposed to reduce the indentation of the first line.

    .firstLetter + span{
    margin-left : -0.5em;}

  4. On April 16th, 2009 milburn said…

    Hi David,

    Thanks for the comment and the link. I vaguely remember reading that. I wouldn’t worry about that last line of CSS, after all it depends which letter your drop cap is.

  5. On November 19th, 2009 Charlie said…

    I would like to change the drop cap font to Verdana.

    Where do the styling settings you use in the article go? Which file do I edit?

  6. On April 13th, 2010 Saydujjaman said…

    Thank you for your excellent work. Can you update the plug-in which will support Unicode characters? Currently it just look for capital A-Z, it will be nice if it work with other language also like bangla. Hope to get support from you.

  7. On January 24th, 2012 Seth said…

    Hmmmm. I like the plug-in. Thank you. It’s just what I needed since I don’t mess with CSS code.

    I tought gong into it that it would be just a drop-cap. I don’t want shadow; how do I get rid of it?

Leave a Comment

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

Proudly powered by WordPress with plane theme by me! | © 2007 - 2019 Thomas Milburn | Valid CSS and HTML