Shadowed text with CSS

The target was to make a navigation bar like that at www.apple.com, which looks like this:

Apple navbar

They did this by having all the links share a single background image, with the x and y offsets for each set so they show the correct part of that single image. In turn the text shadowing has been done in the graphics package that made the image.

I wanted something like this that could be done using CSS, without having to handcraft a background image for each link. That’s what we’re trying to do.

Thanks to Krijn Hoetmer I had a JavaScript function which would shadow some text. But the first problem would be that I would need to put both a JavaScript link and a style sheet link in the HTML – I wanted just one link. After some Googling and experimenting I had some JS which would dynamically load a style sheet:

var cssNode = document.createElement(‘link’);

cssNode.type = ‘text/css’;

cssNode.rel = ’stylesheet’;

cssNode.href = ‘menuBar1.css’;

cssNode.media = ’screen’;

cssNode.title = ‘dynamicLoadedSheet’;

document.getElementsByTagName(“head”)[0].appendChild(cssNode);

So menuBar1.css would style the menu bar, and this JS would load it.

Next task is to shadow the text on eack link. This works by getting the div which encloses the menu, getting each of the child nodes, and calling the shadow function for each one:

var menu=document.getElementById(“menu”);

var children=menu.childNodes;

for (i=0; i<children.length; i++)

{

applyShadow(children[i], ‘white’, 3,10, 7);

}

The applyShadow function is originally by Krijn Hoetmer is modified here slightly, to handle text which has some padding (third and fourth parameters are teh left and top padding:

function applyShadow(targetElement, shadowColor, shadowOffset,pside, ptop) {

if (typeof(targetElement) != ‘object’) {

targetElement = document.getElementById(targetElement);

}

var value = targetElement.firstChild.nodeValue;

targetElement.style.position = ‘relative’;

targetElement.style.zIndex = 1;

var newEl = document.createElement(’span’);

newEl.appendChild(document.createTextNode(value));

newEl.className = ’shadowed’;

newEl.style.color = shadowColor;

newEl.style.position = ‘absolute’;

newEl.style.left = ‘0px’;

newEl.style.top = shadowOffset + ‘px’;

newEl.style.zIndex = -1;

newEl.style.paddingLeft=pside+1+”px”;

newEl.style.paddingTop=ptop+1+”px”;

targetElement.appendChild(newEl);

}

The HTML this is applying to is:

<div id=”menu”><a href=”nowhere” >Link One</a><a href=”nowhere”>Link Two</a><a href=”nowhere”>Link Three</a><a href=”nowhere”>Link Four</a></div>

This is all done in one line – any spaces or CRs produce spurious white space text nodes in the DOM tree.

This shadows the text – but we need to insert graphics for the link separators.  This is a rather bizarre loop:

var count = children.length;

for (i=0; i<count*2; i++)

{

var image = document.createElement(‘img’);

image.setAttribute(’src’,'images/gap.gif’);

menu.insertBefore(image,children[i]);

i++;

}

we go for twice the number of child nodes that are there – because when we’ve finished, we’ll have twice that number. And we go i++ every time we add one. children is dynamically updated as we add nodes.

The style sheet is

#menu

{

position: absolute;

left: 20%;

right: 20%;

min-width: 32%;

background-image: url(images/linkbg.gif);

-moz-border-radius: 5px;

text-align: center;

height: 37px;

}

#menu a

{

position:relative;

color: black;

font-family: arial, helvetica, sans-serif;

font-size:11px;

padding-left: 10px;

padding-top: 10px;

padding-bottom:10px;

top:-15px;

}

The background image is 37 pixels high. We’ll only get round corners in FF – that’s IE’s problem. The result is:

My version

Works in FF and IE

 

Height of divs

In a CSS style sheet its common to center the content by having a div with an id styled like

#outer
{
position: relative;
width: 400px;
margin: auto;
background-color: rgb(1,0,104);
border: 5px white solid;
}

which is 400 wide and centered. But what height? You can fix the height, but if you want it to work with any content, there is an ‘issue’. By default a div goes ‘height:auto;’, and expands to enclose its content. This works – sort of. Suppose the html is
<div id=”outer”>

blah blah blah

blah blah</div>

then you see:

so the outer div has expanded. Now suppose you put another div inside the outer div:
<div id=”outer”>
<div id=”title”>The title<br/>on two lines</div>
blah blah blah
blah blah
</div>

and title is styled

#title
{
border: thin red solid;
}

then we see:

still correct. Now suppose we position title absolute, like this:

#title
{
position: absolute;
top:20px;
left:50px;
border: thin red solid;
}

Now we see:

The browser is not clever enough to work out what height it would need to be to enclose the inner div – it has given up. So you can’t use absolute positioning if you want the containing div to work out its correct height.

If you use relative positioning – the containing div height is correct, according to the ‘initial’ position of the inner div, before its moved, as it were. For example, if you had

#title
{
position: relative;
top:20px;
left:50px;
border: thin red solid;
}

you see:

The browser has left room for it in its initial position, above the ‘blah blah’.

So this is OK for left-right positioning. What if we want it not at the top? Set a margin-top:

#title
{
position: relative;
top:0px;
left:50px;
width: 100px;
margin-top:50px;
border: thin red solid;
}

and you get:

This took me all afternoon. Ha!

My pretty pastel website

I’ve hardly touched my website for around a year, but I’m currently preparing to teach a week-long course on HTML, CSS, JavaScript, SQL and PHP (pretty good in a week) so I thought I should practice what I preach. Which I can’t, really, because I’m visually pretty uncreative. But I know how to Google, and I found this excellent color scheme gismo, and this piece about web fonts, and the result is this. What do you think?