Text Shadows [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : Text Shadows

AmazingAnt

08-22-2006, 02:35 PM

I've seen text on sites where it's one color, and then has a black or grey making it look like it has a shadow. Most of the time, it is done to make it look like the light is coming from the top left side, (shadow on the bottom right) but sometimes they have it so the light is coming from the very middle(shadow all the way around). Is there a way for this to be done with CSS? I suppose for just the shadow effect I could have the same text twice and just have one color offset a bit, but that doesn't help me with the second type of shadowing. Thanks to anyone who can help!

WebJoel

08-22-2006, 03:58 PM

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head></title>
<meta name="generator" content="HTML Tidy for Windows (vers 1st September 2004), see www.w3.org" />

<meta name="keywords" content=" ">
<meta name="description" content="" />
<meta name="robots" content="index,follow">
<meta name="author" content="" />

<style type="text/css">
body, html {border:0; padding:0; margin:0;}
</style>

<style>
/* default setup that everything sees */
.shadow {
/* needed for Internet explorer */
height: 1em; filter: Shadow(Color=#c2c2c2 Direction=150, Strength=16);

/* Needed for Gecko */
line-height: 2em; white-space: nowrap;}
/* used by browsers which know about :before to create the shadow */

/*\*/
html*.shadow {[color:red;/* required by Safari so that [] is correctly begun. associated with the property, yet hiding it. Seen by IE6 */

/*seen by IE6 and Safari, but hidden from Gecko */
text-shadow: #c2c2c2 5px 5px 5px;]color:auto; /* resets color for IE6 */
}/**/

/* end hack using dummy attribute selector for IE5 mac */
.dummyend[id]{clear: both;}

/*\*/
html*.shadow:before { [color:red;/* required by Safari. seen by IE6 */

/* seen by IE6 and Safari, but hidden from Gecko */
display: none;
]color:auto; /* resets color for IE6 */
}/**/

/*end hack using dummy attribute selector for IE5 mac */
.dummyend[id]{clear: both;}
.bigger {font-size:1.2em; font-style:italic;}
</style>

<link rel="shortcut icon" type="image/ico" href="images/favicon.ico" />
</head>
<body background="images/bgfade3.gif">

<div style="margin:25px 30px;">
<h1 class="shadow">Does this have a shadow under it?</h1>

<p class="shadow">How about this sentence?</p>

<h2 class="shadow">Any elelment with <strong>class="shadow"</strong> will now show a drop shadow</h2>

<p class="shadow">This is not my work, but in my archives.</p>
<p class="shadow">You can even apply class="shadow" to an IMG!</p>
</div>

</body>
</html>

AmazingAnt

08-22-2006, 04:11 PM

Thanks. I'm going to chop it up a bit before I use it though, because I'm making my pages with the extension .php. Because of that, I can use PHP code to write a specific portion of the CSS you just gave me depending on the user's browser. Thanks again!

Siddan

08-22-2006, 07:49 PM

that is one fiiiiiiine shadow, just too darn of a shame that firefox doesn´t support this.

But I have a question. When applying this on an element and have a link inside there, the link is only clickable precisely on the letters and not between the letters or any space in the word at all. Have you noticed this?

If so is there a fix perhaps so the whole line will be clickable and not only the letters :)

Wiz Creations

08-22-2006, 11:40 PM

You could do this another way with css and that fixes the link error Siddan mentioned. There are a few errors with this, but I'm pretty sure they will be easy to remove. If you use this, you're better off taking the basic idea and rewritting it to suit your needs. I can't remember which goes first or if they have to be in spans, etc....shadow_container
{
_display: block;
position: relative;
left: 1px;
top: 1px;
color: #222222;
}

.shadow_text
{
_display: block;
position: absolute;
left: -1px;
top: -1px;
color: #DD7711;
cursor: pointer;
cursor: hand;
text-decoration: none;
}