text-shadow to produce white background for text Options

[wysocki]

I have a cms that allows users to post articles with an occasional background image in the div. Obviously this makes the text generally unreadable, so I want to place a white shadow around my black text large enough to make it readable over the image. I've tried css text-shadow, but even if I have multiple definitions the white shadow is not opaque enough for me. Is there any way to make it more opaque? (I don't want to "draw" on a canvas, I'm looking for something I can give the user via a class or similar).

Example:

CODE

text-shadow: 0px 0px 10px #ffffff, 1px 1px 10px #ffffff, 2px 2px 10px #ffffff, 3px 3px 10px #ffffff, 4px 4px 10px #ffffff

[pandy]

Yeah, don't use a blur effect (the third pixel value you have is the blur). And I don't think there's any point in using several shadows with the same color.

Try this.

CODE

selector   { text-shadow: 10px 10px #fff }

But what's the point? You can just as well change the font color of the text and it won't move either, as the shadow will make it do.

[Christian J]

Yeah, don't use a blur effect (the third pixel value you have is the blur).

You can (and may need to) use blur, but not as much.

And I don't think there's any point in using several shadows with the same color.

You may need several to make the blur opaque enough. I've used the following before:

CODE

text-shadow:
-1px -1px 0.2em #fff,
1px -1px 0.2em #fff,
-1px  1px 0.2em #fff,
1px  1px 0.2em #fff;

If I'd just use a single blurred shadow it might be too weak:

CODE

text-shadow: 0 0 0.2em #fff;

Basically, the more you blur the shadow, the thicker and less opaque it will be; so for a thick opaque blur, several shadows are needed.

See also https://www.w3.org/Style/Examples/007/text-shadow.en.html

Note that IE9 and older doesn't support the CSS3 text-shadow property (there are workarounds, though).

Try this.

CODE

selector   { text-shadow: 10px 10px #fff }

That creates a drop shadow with a 10px offset. I think the OP wants a white glow around the text.

But what's the point? You can just as well change the font color of the text and it won't move either, as the shadow will make it do.

I suppose the OP doesn't know what kind of background images the CMS users may upload.

[pandy]

Yeah, don't use a blur effect (the third pixel value you have is the blur).

You can (and may need to) use blur, but not as much.

And I don't think there's any point in using several shadows with the same color.

You may need several to make the blur opaque enough. I've used the following before:

CODE

text-shadow:
-1px -1px 0.2em #fff,
1px -1px 0.2em #fff,
-1px  1px 0.2em #fff,
1px  1px 0.2em #fff;

If I'd just use a single blurred shadow it might be too weak:

CODE

text-shadow: 0 0 0.2em #fff;

Basically, the more you blur the shadow, the thicker and less opaque it will be; so for a thick opaque blur, several shadows are needed.

Why? Isn't what I suggested opaque to you? In what browser isn't it?

But what's the point? You can just as well change the font color of the text and it won't move either, as the shadow will make it do.

I suppose the OP doesn't know what kind of background images the CMS users may upload.

I guess that's a point. But I don't think it will look good. It's more likely to make the text troublesome to read. But maybe it's just a few words.

[Christian J]

Isn't what I suggested opaque to you?

Yes, but it's a drop shadow. From the OP's own example I assume he wants a glow around the original text.

[pandy]

You are probably right. I focused on that the OP wanted it more opaque.

[wysocki]

Holy mackerel! I got help from members #6 and #7! Guess you guys have seen it all around here. Thanks a million for your guidance, I got the user to say she loved the resulting effect! You're correct, I did want a glow effect instead of a drop shadow. I found it interesting that black appears a lot more opaque than white.

I got the idea from watching an old movie with subtitles - the first half of the film the subtitles were just white text (sometimes unreadable). Then halfway through, the producer decided to put a black glow behind each letter and it was great. Couldn't figure out why the whole film wasn't done that way. Thanks again.

[Christian J]

Holy mackerel! I got help from members #6 and #7!

Scary, isn't it?

Guess you guys have seen it all around here.

A lot of things keep changing though. CSS3 and its text-shadow property is relatively new, for example.

I found it interesting that black appears a lot more opaque than white.

I don't see that in my browsers. Maybe it's the same perceptual effect that makes white text on black bakground harder to read?