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!
JavaScript and OOP for the DOM
I wanted a color transition effect on web page elements when the mouse cursor passed over them – like a:hover, but for any element, not just a link, and a transition over say 0.8 seconds, not just an abrupt change. onmouseout should transition to the original color of the element.
This can be done using onmouseover and onmouseout, but I wanted to set it up for elements of a given tag, class or id. So (after only 2 days) I did it using OOP in JavaScript – listing below. I define a class (strictly a prototype) called ColorP, which will have the behaviour I want, and associate some web page elements with instances of this class. One tricky point is that the method to change the color has to be recursive, and it was difficult to find the syntax for this. Thanks to Pablo Cabrera for ‘arguments.callee’, which must be one of the obscurer backwaters of JavaScript.
The web page body is:
<p id=”test” style=”color: rgb(0,255,0); background: #ff00ff” Hello</p>
<h1 id=”two” “>Goodbye</h1>
The body onload calls:
function start()
{
obj1 = new ColorP(“test”);
obj2=new ColorP(“two”);
return;
}
So 2 objects are created associated with these two elements. We could have traversed the document tree and done this for given tags or classes. The code for ColorP objects is:
function ColorP(id)
{
// data members ///////////////////////////////////////////
var obj;
// time in mS delay before each recursive call
var timeStep;
// initial colors
var red, green, blue;
// color change each step
var rDiff, gDiff, bDiff;
// current color
var red1, green1, blue1;
// target colours and time for transition
var r,g,b,time;
// count and count1 count the transition steps
var count, count1;
// two methods /////////////////////////////////////////////
this.fadeIn = function()
{
if (count==10) {
count=0;
return;
}
count++;
red1+=rDiff;
green1+=gDiff;
blue1+=bDiff;
// set colors to integer values
intR = Math.round(red1);
intG = Math.round(green1);
intB = Math.round(blue1);
obj.style.color=”rgb(“+intR+”,”+intG+”,”+intB+”)”;
setTimeout(arguments.callee, timeStep);
}
this.fadeBack = function()
{
if (count1==10) {
count1=0;
return;
}
count1++;
red1-=rDiff;
green1-=gDiff;
blue1-=bDiff;
// set colors to integer values
intR = Math.round(red1);
intG = Math.round(green1);
intB = Math.round(blue1);
obj.style.color=”rgb(“+intR+”,”+intG+”,”+intB+”)”;
setTimeout(arguments.callee, timeStep);
}
// cnstructor code ///////////////////////////////////////
r=255; // could be passed as constructor parameters
g=0;
b=45;
time=0.7;
// we will do this in 10 steps
// so time for each step = time * 100 milliseconds
timeStep = time*100;
count=0;
count1=0;
obj=document.getElementById(id);
// get colors
styles=obj.getAttribute(“style”);
cols=getColorFromStyles(styles);
if (cols==null) return; // do nothing if can’t obtain color’
// change to numbers
red=parseFloat(cols[0]);
green=parseFloat(cols[1]);
blue=parseFloat(cols[2]);
// work out colour change amounts
rDiff=(r-red)/10.0;
gDiff=(g-green)/10.0;
bDiff=(b-blue)/10.0;
// set current colors to the initial ones
red1=red;
green1=green;
blue1=blue;
obj.onmouseover=this.fadeIn;
obj.onmouseout=this.fadeBack;
}
Unfortunately the code to get the color style is different for IE:
// get foreground color from a set of style attributes
// this returns an array of 3 values – the rgb components
// it works for colors ONLY in the form rgb(a,b,c). If there
// are no styles, or no color defined, it returns
// the equivalent of black
function getColorFromStyles(styles)
{
// in IE, styles is a style object, and styles.color yields the color
// in FF and Opera, styles is a string like ‘color:rgb(1,2,3); background: rgb(4,5,6)’
c=styles.color;
if ( c == undefined ) // NOT IE, so get color:.. out of the string
{
if (styles==null)
return new Array(0,0,0);
// split on ; to separate attributes
pairs=styles.split(“;”);
// search for color
for (i=0; i<pairs.length; i++)
if (pairs[i].search(“color”)!=-1) break;
if (i==pairs.length) // no color..
return new Array(0,0,0);
// separate style from substance (!)
value=pairs[i].split(“:”);
// value[1] is rgb…
col=value[1].slice(5,value[1].length-1);
colours=col.split(“,”);
return colours;
}
else // for IE, so c is like ‘rgb(12,3,4)
{
if (c==”") // no color defined
return new Array(0,0,0);
col=c.slice(4,c.length-1); // slice from rgb(…
// split 3 parts on ,
colours=col.split(“,”);
return colours;
}
}
This works on FireFox, Opera and IE – maybe others
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?
