Shadow Text Effect

[Spook]

I've been trying to re create the Drop Shadow effect on text but run into problems with Netscape and Mozilla browsers when I set a negative value for z-index.

I've ended up with a reasonable "Up Shadow" - but not what I had in mind.

body{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 2em;
color: #009;
background : #fff;
padding : 10px;
position:relative;
}
#toptext{
color: #ccc;
background: transparent;
}
#shadow{
position : relative;
left: .05em;
top : -1.1em;
background: transparent;
z-index: 2; /*changing this to a neg. value "drop shadow" it does not display in NN7 or Moz*/
}

<div id="toptext">Shadow Text</div>
<div id="shadow">Shadow Text</div>

Is there something I have missed or am I approaching this from the wrong angle?

Spook

[pageoneresults]

Hello Spook! I would advise against using the shadow effect using CSS. I've been doing some reading on this effect and the W3C actually recommends that you not use it from an accessbility standpoint. The second version of the text (used for the shadow) is spoken twice when read by a screen reader or other accessibility device.

From the W3C - Text Shadows [w3.org]

Text shadow effects can be achieved in CSS1 using negative margins and duplicated text. The results can be visually stunning, but have unfortunate side-effects for non-visual readers and people using browsers that don't support style sheets.

More information...

16.3.2 Text shadows: the 'text-shadow' property [w3.org]

[drbrain]

Had anybody implemented it, you could use the text-shadow [w3.org] property. Be careful when using a negative z-index, you're requesting that the box with a negative z-index be placed behind the current stacking context.

By adjusting what you've got, I've created the drop shadow effect by having the second line of text being on top like this:

<div>Top text</div>
<div style="color:red; position:relative; top:-1.2em; left:-.05em">Top text</div>

By adjusting the offsets carefully, you can have the shadow go in any direction.

If anybody had a CSS2 compliant voice reader, you could add 'volume: silent' to the shadow.

[Spook]

Yes it was the text-shadow property that prompted me to look into this. When I tried it in a style sheet and found that virtually no one seems to support it, I though I would try and emulate it.

I had considered the potential spamming issues [possibly doubling-up on key text etc.] but I can't immagine you would want to use it too many times on a page. However I have little or no experience at all with screen readers so hadn't considered that issue.

I dare say I'm not alone in my ignorance so, if I were to add 'volume: silent' to the shadow, does this solve the problem completely or are there millions of CSS1 compliant voice readers out there?

Thanks

Spook

[DrDoc]

There's an IE-only solution, if you're interested. IE supports a bunch of proprietary filters. One of them will let you give the text a shadow effect.

[MonkeeSage]

Spook:

This works well for me for a "drop shadow" (based on your example):

 body {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 2em;
 color: black;
 background: #ffffff;
 padding: 10px;
 position: relative;
 }
 #toptext {
 color: gray;
 background: transparent;
 }
 #shadow {
 position: relative;
 left: -0.02em;
 top : -1.28em;
 background: transparent;
 z-index: 2;
 }

<div id="toptext">Shadow Text</div>
<div id="shadow">Shadow Text</div>

--------

This* is also kind of cool when clicked (text 'pressed' effect) or when the text is selected (try selecting the line; once you mouse button up, the 'top' layer will be displayed again making for a 'shadowed selection').

 #shadow:active {
 display: none;
 }

* NN only

--------

Overall, nice effect. :)

Ps. Note that your "shadow" text is actually my "top" text and vise versa.

Shelumi`El
Jordan

S.D.G

[Spook]

Hi Monkeesage.

Works well indeed! Playing with colours gives some nice effects too.

I decided not to use the drop shadow effect because of pageoneresults comments above. Seems a shame, but I'm still a little ignorant about voice readers so consigned this effect to my "library" for future use.

Spook.