|
|
Posted by cwdjrxyz on 11/21/06 18:44
Toby Inkster wrote:
> Gérard Talbot wrote:
>
> > Recent Mozilla releases (stable releases) and Firefox 1.5+ support CSS 3
> > color module.
>
> The named colours in CSS 3 are supported by most browsers, regardless of
> overall support for CSS. Certainly IE 4, Opera 5 and Netscape 4.x support
> them.
Although using hex colors rather than named colors seems a better
choice to many, there are situations when using the r,g,b notation has
many advantages. For example, if you are operating on color values with
some function, you may have to use a hex/base10 conversion, while if
you use r,g,b you can avoid this conversion.
To give a very early example from 1996, hex color values are being
operated on by a script that changes the text color as a function of
positions of letters in the text. The script portions of this very
ancient example are given below, and notice the hex/base10 conversion
that has to be used.
_________________________________________________________________
// Michael P. Scholtis (mpscho@planetx.bloomu.edu)
// All rights reserved. January 15, 1996
// You may use this JavaScript example as you see fit, as long as the
// information within this comment above is included in your script.
function MakeArray(n){
this.length=n;
for(var i=1; n>=i; i++) this[i]=i-1;
return this
}
hex=new MakeArray(16);
hex[11]="A"; hex[12]="B"; hex[13]="C"; hex[14]="D"; hex[15]="E";
hex[16]="F";
function ToHex(x){ // Changes a int to hex (in the range 0
to 255)
var high=x/16;
var s=high+""; //1
s=s.substring(0,2); //2 the combination of these are the
same as the trunc function
high=parseInt(s,10); //3
var left=hex[high+1]; // left part of the hex-value
var low=x-high*16; // calculate the rest of the values
s=low+""; //1
s=s.substring(0,2); //2 the combination of these are the
same as the trunc function
low=parseInt(s,10); //3
var right=hex[low+1]; // right part of the hex-value
var string=left+""+right; // add the high and low together
return string;
}
function rainbow(text){
text=text.substring(3,text.length-4); // gets rid of the
HTML-comment-tags
color_d1=255; // any value in 'begin'
0 to 255
mul=color_d1/text.length;
for(i=0;text.length > i;i++){
color_d1=255*Math.sin(i/(text.length/3)); // some other things
you can try >> "=255-mul*i" to fade out, "=mul*i" to fade in, or try
"255*Math.sin(i/(text.length/3))"
color_h1=ToHex(color_d1);
color_d2=mul*i;
color_h2=ToHex(color_d2);
document.write("<font
color='FF"+color_h1+color_h2+"'>"+text.substring(i,i+1)+"<\/font>");
}
}
// --End Hiding Here -->
<!--
{rainbow("--> This is a rainbow text effect which you may upload to
your own site and use as you wish. Unfortunately you can only add about
10 lines of text here and then you have to use the code over again in
the next paragraph. You only need to use the code that's in the body
tag over again, not the part in the head tag. Let's see what happens
here if I continue to add text and see if it continues to change the
color of the text. And I'll just ramble on here a little more so you
can see the effect here and how it changes the text color. Cool effect
Huh! <!--");}
//-->
__________________________________________________________________________
Now if you use r,g,b notation and some modern html including the span
tag, you can avoid the hex/base10 conversion and greatly decrease the
code needed. See what about 10 years of progress in html allows at
http://www.cwdjr.net/text/rainbow_text.html by viewing the source code.
Since writing a color in r,g,b takes a few more key strokes than using
hex, many seldom, if ever, use r,g,b. However it is well worth
remembering it if hex color will result in the need for a hex/base10
conversion.
The example given seems very dated now. All we need is a midi and
several animated gifs to give the full flavor of this long-gone era.
Navigation:
[Reply to this message]
|