CSS: stencil effect

Question

I wonder if it is possible in a pure css stencil effect: A block with the background color and the color "transparent", which will reveal the background of the parent block.

For example, I have a parent block with a gradient or pattern as the background, and I want to overlay a block with a black background where the text content will leave the gradient look of the parent block.

I have not found a way to make this work, but maybe someone has an idea or a hint?

EDIT

Sorry, I should not be accurate enough.

Here is an image of the desired result:

Answer 1

Perhaps you can use CSS3 background-clip . write like this:

HTML

<p>T</p> 

CSS

 p{ font-size:50px; font-family:impact; background: url(http://lorempixel.com/output/technics-hc-1414-1431-2.jpg); -webkit-text-fill-color: transparent; -webkit-background-clip: text; position:relative; width:80px; height:80px; text-align:center; padding-top:10px; } p:after{ content:''; position:absolute; background:rgba(0,0,0,0.8); width:80px; height:80px; border-radius:100%; top:0; left:0; z-index:-1; } body{ background: url(http://lorempixel.com/output/technics-hc-1414-1431-2.jpg); } 

Check out http://jsfiddle.net/rD6wq/6/

Answer 2

Something using a built-in font, like http://www.google.com/webfonts/specimen/Allerta+Stencil , may be close to what you want. By changing the background and text, you should get what you are looking for.

Answer 3

 #element_id { opacity:0.4; filter:alpha(opacity=40); } 

this will set the opacity of the div or whatever you apply to it 40% of its original opacity (usually 100% if you don't apply this to .png or .gif images with reduced opacity)

Answer 4

As far as I know, you can use SVG for this, but it will not be trivial.

This (and this ) may be the closest thing to do what you need. The problem is that it does not work the same in every browser, although you can try more in-depth studies.

Update : Lea Verou introduced a simple and elegant solution in her article: Text Masking - the Way of Standards

Answer 5

You can play with the CSS3 text-shadow property.

 p{ text-shadow:0px 0px 2px #000 } 

See my example here .

Detailed information about the facility here .