Bramme.net

I was looking at the new wpcandy theme today and noticed their latest post headline, which had a nice little shadow. I thought “hmm, I want to know how they did that. So I set out to check the code. After all, how hard could it be?

When looking at wpcandy’s source code, I saw this

10 Plugins to Improve the WordPress Admin
10 Plugins to Improve the WordPress Admin

Now, that’s not really pretty I thought. So how could we clean this up? I know! Let’s replace the text with javascript. That way stuff will degrade nicely when JS and/or CSS is off.

Allright, so we want to write

This will be our title

But we want it to become

This will be our titleThis will be our title

As you can see, I left out the <a> tags, seeing as I wouldn’t need them. So, with a little bit of javascript we could change this text.

Note: I’m using jQuery on my site, because it’s better than Mootools and Prototype (at least that’s what I think)


$(document).ready(function() {
var hline = $('h2').text();
var replace = '‘ + hline + ‘‘ + ‘‘ + hline + ‘‘;
$(’h2′).html(replace);
});


What this code basically does is:

1. When the document is ready to be manipulated
2. Get the text from all h2 elements (you could place any element here, even css selectors)
3. Build the string to replace the text with.
4. Replace the text of each h2 element

This is a quick ‘n dirty solution, probably there’s better ways of doing this, I just don’t care about it. It works and that’s what counts. As you also probably noticed, I added <em> tags to the first line, as I realised during coding I’d need that extra tag.

So now we got our correct html setup. On to the CSS!


h2 {
font-size: 1.6em;
margin: 20px 0;
font-family: "Trebuchet MS", "Lucida Sans", Arial, sans-serif;
color: #aec364; // light color
position: relative;
}
h2 em {
font-style: normal;
position: absolute;
display: block;
z-index: 2;
}
h2 span {
position: absolute;
display: block;
left: 1px;
top: 1px;
z-index: 1;
color: #7fa200; //darker color
}


So, this CSS is pretty straightforward I’d think. Style your h2 in the h2 selector, NOT the em tag, as your headline wouldn’t be styled if JS was turned off! I just gave it some size, margin and a light green color. We also need to set it’s position to relative, as we’ll use position:absolute on the em- and span-elements.
Next piece of CSS, the em-element: we don’t need it in italics, so we set the font-style to normal and we set the position to absolute and display to block.
Last, we style the span-element: same goes for our em-element: position: absolute, display: block, but we move it one pixel down and to the left, creating the shadow effect. If you’d have a look now at your headline, you’d see it works, except for the shadow showing on top of the lighter text. To fix this we set a z-index for our em and span element. You can pick any number you’d like, just make sure to set the z-index of your em higher than that of your span.

That should do the trick!

Have a look at the demo!

I’ve tested this in the following Windows browsers and found it working:

• Firefox 3.0
• Opera 9.5
• Safari 3.1.1
• Internet Explorer 7.0

Haven’t tested it on IE6, I’m guessing it won’t work, so I should probably add some conditional to the JS: if IE6, don’t execute.

Downside of this method: when you select text and copy paste it, your headline gets copied twice. Really not sure if that one’s possible to fix.

Tags: css, js, xhtml