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
OOP in Javascript
So it is possible to do a kind of OOP in JavaScript. For example, here is a complex number class (prototype), with private data fields:
function Complex(r,i)
{
var real=r;
var imag=i;
this.add = function(other)
{
result = new Complex(0,0);
result.setR(real+other.getR());
result.setI(imag+other.getI());
return result;
}
this.display = function()
{
alert(real+”+”+imag+”i”);
}
this.getR = function() {
return real;
}
this.getI = function() {
return imag;
}
this.setR = function(v) {
real=v;
}
this.setI = function(s) {
imag=s;
}
}
function start()
{
numb1 = new Complex(1,2);
numb2 = new Complex(3,4);
numb3 = numb1.add(numb2);
numb3.display();
return;
}
OO in CSS
I’ve just coded something in Javascript which fades the color of an element from blue to red when you mouseover, and red back to blue when you mouseout. Then in the HTML you give the element the attribute onmouseover = ‘whatever
But suppose, in the spirit of CSS, I want to make this happen for each instance of that selector (or class). In other words in CSS I want to specify the dynamic behaviour, as well as static appearance properties, of whatever it is. In other words I want to be able to treat CSS selector items as OOP classes. But I can’t (can I?) Come on, W3C, get it sorted.
Chromed text with the GIMP
Chrome Text For GIMP 2.6.7 – thanks to Penguin Pete
1. Write your text, in white on a black background
2. Blur it a bit by Filters..Blur.. Gaussian blur.. 5 pixels: (This is for the bump map we make later)
3.Do Select..By color, then click on the black. Then Select Invert. This gives a selection around the text:
4. Add a new transparent layer, select it and hide the rest. Do a gradient blend, using black to white:
5. Bump map – Go Filters..Map.. Bump Map. Use the black and white layer as the bump map:
6. Go Colors..Curves, and use a curve on value somethink like this:
The result:
Chromed button by similar process:
The GreekLetterWidget
I’m currently writing some maths software in which I wanted to be able to use Greek letters as well as Roman. Since Java uses Unicode, this was no problem internally. But how could the user input Greek as well as Roman characters, through a standard US/UK keyboard, and without obscure and slow character codes?
So I wrote a widget which had 25 buttons, labelled with the lower case Greek letters. It has an instance variable which is a reference to a textfield. When the user clicks a button, the corresponding character is appended to that textfield, and focus is placed on that textfield, ready for the next keystroke.
Here it is:
/**
* This is a UI widget supporting the input of Greek letters
* It produces a 5 X 5 grid of buttons, labelled with lower case Greek letters
* When a button is clicked, the corresponding letter is appended to a supplied
* text field
* @author Walter Milner
*/
public class GreekLetterWidget extends JComponent implements ActionListener {
private MyButton[] buttons = new MyButton[25];
private MyTextField textField;
/**
* make an instance, of size 100 by 100
* @param textField The textfield to which the letter will be appended
*/
public GreekLetterWidget(MyTextField textField) {
this.textField = textField;
setLayout(new GridLayout(5, 5));
setSize(100, 100);
// Greek letter buttons
char[] c = new char[1];
c[0] = ‘\u03B1′;
String s = new String(c);
Insets inset = new Insets(1, 1, 1, 1);
for (int i = 0; i < 25; i++) {
buttons[i] = new MyButton(s);
buttons[i].setToolTipText(s);
c[0]++;
s = new String(c);
buttons[i].setMargin(inset);
buttons[i].addActionListener(this);
add(buttons[i]);
}
}
public void setField(MyTextField target)
{
textField=target;
}
public void actionPerformed(ActionEvent e) {
Object obj = e.getSource();
textField.setText(textField.getText() + ((MyButton) obj).getText());
textField.requestFocus();
}
}
This looks like:
screenshot
glw = new GreekLetterWidget(funcTextField);
c.gridx = 3;
c.gridy = 0;
c.gridheight = 2;
add(glw, c);
The setTextField() method is provided so that this can be used with more than one text field in a dialog. The textfields need to have a focuslistener, and in the gainFocus, setTextField is called with that text field as the parameter. That means that when the user clicks on a textfield, from then on GreekLetter button clicks go into that text field.
Padding a JLabel
Googling for this was pretty fruitless, but I eventually got a hint, which worked out OK. The hack is to have an ‘empty’ border around the text. If you also want a visible border, you can combine that with the empty border in a compound border. So you have something like:
public class MyLabel extends JLabel {
static Font labelFont = new Font(“SansSerif”, Font.PLAIN, 12);
static Border gap = BorderFactory.createEmptyBorder(4, 2, 4, 2);
static Border blueline = BorderFactory.createLineBorder(Color.blue);
static Border compound = BorderFactory.createCompoundBorder(blueline, gap);
MyLabel(String text) {
super(text);
setFont(labelFont);
setBorder(compound);
}
}
which looks like:
screenshot
Fodor’s Concepts – Where Cognitive Science Went Wrong
I’m into the first chapter, then I had to go back to the ‘Typological Conventions’ at the start. And I found that these were not straight-forward. Here is a version:
Rule 1: Names of concepts are written in capitals
Rule 2: Names of English expressions appear in single quotes.
Rule 3: Names of semantic values of words and concepts are written in italics.
At a glance, this is clear. But if you think carefully, it entails a great deal – possibly the whole book. To start with, it refers to names. Do these kinds of things have names? For example, does the English phrase ‘red’ have a name? If so, what is it? Is it the word red?
What is a name? In terms of how the term is used (hence a Wittgensteinian approach), names are used where there are a set of similar things, and names arbitrarily label and distinguish them. For example, ‘What is the name of this mountain?’, ‘What is the name of this river?’, ‘What is your name?’ and so on. Otherwise, things don’t have names. Or you could ask ‘What is the name of your name?’ Since your name is (more or less) unique, it does not need a name to distinguish it from other names.
I think here ‘name’ is used as in ‘is expressed by’. Then we would have a modified version
1. Concepts are expressed by text written in capitals.
2. Phrases are expressed by text in quotes.
3. Semantic values of words and concepts are expressed in italics.
However the third rule also entails the assertion that word phrases and concepts have ’semantic values’. So this would be more explicit as follows:
1. Words and concepts both have associated semantic values
2. Semantic values are expressed in italics
3. Concepts are expressed in capitals
4. Word phrases are expressed in quotes ( to distinguish them from surrounding text which discusses the word phrases).
Then, for example, the concept RED and the word ‘red’ both have the semantic value being red.
But that asserts that words and concepts mean things, and it seems that if a word phrase and a concept mean the same thing, the concept is redundant, and we only need to discuss the word phrase and its meaning. But I suppose that would beg the question of why some phrases, like ‘Colorless green ideas’, do not have meanings.
The death of J.G.Ballard
Just heard the news. Things like The Crystal World, The Drowned World, The Atrocity Exhibition, Crash, The Day of Creation, The Terminal Beach were incredibly good. His visions were surreal, obsessive, neurotic, fascinating, and his writing exposed the stuff in our heads as being far weirder than we might care for, so that the most bizarre was in fact recognisable and familar.
If you haven’t read him, do so. Like the advert says, he’s worth it.
