Milburn

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.