Can I do knock-out/punch-through transparency with CSS fonts?

Does it have to be dynamic? The only way to do that is with an image with transparency (GIF or, better, PNG).

I'm not sure if this is what you want, but will explain it anyway.

Situation: you have a non plain background that you want to bee seen through your text.

Solution: no CSS is coming to the rescue for this. You'll have to use your trusty image editor to create a layer with text, and another layer that will be the negative of your text

This could allow you to have some interesting effects, but if you want it to be dynamic, you'll have to generate the images on the fly serverside.

This kind of trickery is currently impossible with pure CSS (might be possible with Javascript).

Edit

Seeing Paul's find on webkit got me thinking on how to fake that behavior in Firefox, Opera and IE. So far I've had good luck using the canvas element on Firefox, and I'm trying to find some behavior in filter:progid:DXImageTransform.Microsoft.

So far with canvas, this is what I did

<html>
<body>
<canvas id="c" width="150" height="150">
</canvas>
<script>
ctx = document.getElementById("c").getContext("2d");
// draw rectangle filling the canvas element
ctx.fillStyle = "red";
ctx.fillRect(0,0,150,150);

// set composite property
ctx.globalCompositeOperation = 'destination-out'; 
// the text to be added now will "crop out" the red rectangle
ctx.strokeText("Cropping the", 10, 20);  
ctx.strokeText("red rectangle", 10, 40);  

</script>
</body>
</html>

by using a detination-out compositing and drawing text on the canvas.

I’m not exactly clear what you’re asking (100% transparency means that something’s invisible, and invisible text isn’t generally a great idea), but in general:

The CSS opacity property applies to an entire element, not just its text. So if you have this HTML:
```
<div class="opacity-50">
    This is a div with a background colour and 50% opacity
</div>
```
And this CSS:
```
.opacity-50 {
    background: #ccc;
    color: #000;
    opacity: 0.5;
}
```
Then both its background and its text will have 50% opacity.

rgba colour values allow you to specify semi-transparent colours. So, if you have this HTML:

<div class="text-opacity-50">
    This is a div with semi-transparent text
</div>

And this CSS:

.text-opacity-50 {
    background: #ccc;
    color: rgba(0,0,0,0.5);
}

Then only its text will have 50% opacity.

I think rgba colour values are supported by slightly fewer browses than opacity.

Ah — if you’re talking about “punch-through” transparency, no, CSS doesn’t do this.

Except for WebKit (the rendering engine in Safari and Chrome), which has a totally custom, made-up-by-Dave-Hyatt, not-even-in-CSS-3 property value, -webkit-background-clip: text;.

No other browser other than Safari and Chrome supports it.

Can I do knock-out/punch-through transparency with CSS fonts?

Edit

Related

Recent Posts