CODEWITHSUNDEEP
opacityalphacss
Damon
Damon

Reputation: 10809

Any way to have text-shadow that doesn't show through behind text?

I want to have text that has a shadow/glow, but the problem is that the text itself is slightly transparent and the shadow shows through behind it, colouring the text.

color: rgba(226,229,226,0.88);
-webkit-text-stroke-width: .5px;
-webkit-text-stroke-color: #9c9c9c;
text-shadow: 0px 1px 29px #333;

Is there any CSS method that acheive this? box-shadow doesn't seem to affect the colouration of a slightly transparent item casting a shadow, so this behaviour is inconsistent (especially when you want text to have the same appearance as a box).

Here is a jsfiddle to explain what I'm talking about: http://jsfiddle.net/cutcopypaste/KzxrK/

Upvotes: 3

Views: 115

Answers (1)

Ivozor
Ivozor

Reputation: 976

You can add the exact same text, in your background color and same size and shape, behind your text.

Using something like this and respective CSS:

<h1>█</h1><h1 class="c1">█</h1>

EDIT: As shown here with your edited jsfiddle http://jsfiddle.net/KzxrK/2/

Upvotes: 1

Related Questions