Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Shadow

Posted on 2003-11-29
9
Medium Priority
?
965 Views
Last Modified: 2010-04-09
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
0
Comment
Question by:ethar1
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 19

Expert Comment

by:RanjeetRain
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

by:RanjeetRain
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)
 * 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
 
LVL 19

Expert Comment

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

http://www.javascript.com  http://www.javascriptsource.com
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 19

Accepted Solution

by:
Dexstar earned 1600 total points
ID: 9841812
@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
 
LVL 31

Assisted Solution

by:seanpowell
seanpowell earned 400 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>
<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
 
LVL 31

Assisted Solution

by:seanpowell
seanpowell earned 400 total points
ID: 9842151
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
 

Author Comment

by:ethar1
ID: 9842281
Thanks for you all.
0
 
LVL 19

Expert Comment

by:Dexstar
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

by:seanpowell
ID: 9842752
No worries Dex* :-)
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

598 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question