Shadow

Dear All,
How can add shadow to a text in html :
<b>This is shadow text</b>
Also how can change it's color.
Thanks
ethar1Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RanjeetRainCommented:
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
RanjeetRainCommented:
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)
 * Copyright (C) 2001. All Rights Reserved.
 * 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
RanjeetRainCommented:
For more sophisticated scripts, visit the mother of all JavaScript sites:

http://www.javascript.com  http://www.javascriptsource.com
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

DexstarCommented:
@ethar1:

> How can add shadow to a text in html :
> <b>This is shadow text</b>

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

<table style="filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#808080,strength=2)"><tr><td>This Text is Shadowed!</table>

(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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
seanpowellCommented:
>>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>
<head>
<style type="text/css">
<!--
body        { font-family: Verdana, sans-serif; font-size:15px; color:#000000; font-weight:bold; }
div.bshadow { filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc, Direction=135, Strength=4); width: 300px; }
div.rshadow { filter: progid:DXImageTransform.Microsoft.Shadow(color=#ff0000, Direction=135, Strength=4); width: 300px; color:#0000FF; }
/-->
</style>
</head>
<body>
<div class="bshadow">Black text with a black shadow.</div>
<div class="rshadow">Blue text with a red shadow.</div>
</body>
</html>
0
seanpowellCommented:
And just to complete the picture:

For a more cross-browser css implementation:
<html>
<head>
<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>
</head>
<body>
<h4>A headline with a drop shadow<font color="#FFFFFF" class="text">A headline with a drop shadow</font></h4>
</body>
</html>

At some point in the future, most browsers will (should) support the CSS2 text-shadow property:
http://www.w3.org/TR/REC-CSS2/text.html#propdef-text-shadow

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

<html>
<head>
<style type="text/css">
<!--
p { font-family:Georgia; font-size: 18px; color: #000; text-shadow: black 0px 0px 5px;}
//-->
</style>
</head>
<body>
<p>Safari 1.1 in OS X 10.3</p>
</body>
</html>
0
ethar1Author Commented:
Thanks for you all.
0
DexstarCommented:
@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
seanpowellCommented:
No worries Dex* :-)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.