Solved

Posted on 2003-11-29
927 Views
Dear All,
Also how can change it's color.
Thanks
0
Question by:ethar1
• 3
• 3
• 2
• +1

LVL 19

Expert Comment

ID: 9841789
For the shadow effect you will have to use LAYERS. There is no built-in support for this in HTML. You will have to your DHTML for the same.

JavaScript can allow you to achieve for the results.
0

LVL 19

Expert Comment

ID: 9841796
You may use the following fade script written by me as a start point. This script changes the background color of the page.

/*************************************************************
* fade script ver0.5 by Ranjeet Rain (ranjeetrain@yahoo.com)
* You can freely copy, use, modify this script,
* if the credit is given in the source.
*************************************************************/

function makearray(n) {
this.length = n;
for(var i = 1; i <= n; i++)
this[i] = 0;
return this;
}

hexa = new makearray(16);
for(var i = 0; i < 10; i++) hexa[i] = i;
hexa[10]="a"; hexa[11]="b"; hexa[12]="c";
hexa[13]="d"; hexa[14]="e"; hexa[15]="f";

function hex(i) {
if (i < 0)
return "00";
else if (i > 255)
return "ff";
else
return "" + hexa[Math.floor(i/16)] + hexa[i%16];
}

function setbgColor(r, g, b) {
var hr = hex(r); var hg = hex(g); var hb = hex(b);
document.bgColor = "#"+hr+hg+hb;
}

function fade(sr, sg, sb, er, eg, eb, step) {
for(var i = 0; i <= step; i++) {
setbgColor(
Math.floor(sr * ((step-i)/step) + er * (i/step)),
Math.floor(sg * ((step-i)/step) + eg * (i/step)),
Math.floor(sb * ((step-i)/step) + eb * (i/step)));
}
}

To call this script, put this line in your page.

<script language=javascript>setTimeout("glow()",5000)</script>

~ Ranjeet Rain
0

LVL 19

Expert Comment

ID: 9841800
For more sophisticated scripts, visit the mother of all JavaScript sites:

http://www.javascript.com  http://www.javascriptsource.com
0

LVL 19

Accepted Solution

Dexstar earned 400 total points
ID: 9841812
@ethar1:

If you don't mind targeting Internet Explorer, here is a very quick and easy way to do it:

(I don't know why it has to be in a TABLE tag, it just does..)

> Also how can change it's color.

You change its color by changing the "color=#808080" to whatever RGB color value you want.  There are 2 other values (direction and strength) that you can play with too to get how you like it.

It might be nicer if you used a style sheet instead of an inline style tag to accomplish this, but the idea is the same:  Use  the MS filter to add a drop shadow.

It works on images, too...

Hope That Helps,
Dex*
0

LVL 31

Assisted Solution

seanpowell earned 100 total points
ID: 9842014
>>I don't know why it has to be in a TABLE tag, it just does..
I'm not sure where you're getting that info from, it certainly doesn't require a table.

It does require what's called "layout", which allows us to render css styling effects. An object with a layout is anything that is either absolutely positioned, contained in a block element, or is an inline element with a specified height or width.

<html>
<style type="text/css">
<!--
body        { font-family: Verdana, sans-serif; font-size:15px; color:#000000; font-weight:bold; }
/-->
</style>
<body>
</body>
</html>
0

LVL 31

Assisted Solution

seanpowell earned 100 total points
ID: 9842151
And just to complete the picture:

For a more cross-browser css implementation:
<html>
<title></title>
<style type="text/css">
<!--
h4 { position: relative; left: 1px; top: 1px; color: #999; font-family: "Times New Roman"; font-size:21px; }
.text { position: absolute; left: -2px; top: -2px; color: #000;}
//-->
</style>
<body>
</body>
</html>

At some point in the future, most browsers will (should) support the CSS2 text-shadow property:

Safari actually supports it now in OSX 10.3 - for those of you that have it...

<html>
<style type="text/css">
<!--
p { font-family:Georgia; font-size: 18px; color: #000; text-shadow: black 0px 0px 5px;}
//-->
</style>
<body>
<p>Safari 1.1 in OS X 10.3</p>
</body>
</html>
0

Author Comment

ID: 9842281
Thanks for you all.
0

LVL 19

Expert Comment

ID: 9842693
@seanpowell:

Well, it was late when I wrote that.  What I should've said is that I couldn't get it to work with anything but a <TABLE> tag, but your explaination clears up why that is.  Thanks!

Dex*
0

LVL 31

Expert Comment

ID: 9842752
No worries Dex* :-)
0

## Featured Post

Do you want to insert HTML5 video into your site? This is the tutorial how to do so. What are the main advantages of HTML5 video? 1) Have good compression, good image quality, and low decode processor use. 2) It is royalty-free 3) It is easi…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …