CODEWITHSUNDEEP
css
Dan Hennion
Dan Hennion

Reputation: 1745

CSS3 Change text opacity without affecting stroke

Have a unique issue here. I'm trying to set some text to completely opaque, while still keeping a visible stroke on the text. I'd like to be able to see through the text as the background is dynamic, so I can't simply set it to the color of its backround.

Here's what I've got, but opacity is overwriting the stroke:

#special {
    opacity: 0;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; 
}

Help appreciated!

Upvotes: 1

Views: 167

Answers (1)

Vitox
Vitox

Reputation: 4424

The opacity affects all visual properties of the object.

But, what about this?

#special {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black; 

    color: transparent;
}

JsFiddle: http://jsfiddle.net/fdLecLan/2/



About the opacity, the W3schools says:

The opacity-level describes the transparency-level, where 1 is not transparant at all, 0.5 is 50% see-through, and 0 is completely transparent.

So setting it to 0 will make it totally transparent, but is important to remember that it stills stay in the View port, and stills interact with user (So, if it's a button or link, it'll still be clickeable...)

Upvotes: 2

Related Questions