?
Solved

Shadow

Posted on 2003-11-29
9
Medium Priority
?
959 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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. …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

801 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