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.

2 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.

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=""> <strike> <strong>

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