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

by

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.

More Related Contents:

  1. Set opacity of background image without affecting child elements
  2. Using CSS for a fade-in effect on page load
  3. CSS opacity only to background color, not the text on it? [duplicate]
  4. Opacity CSS not working in IE8
  5. Transparent hollow or cut out circle
  6. Opacity of background-color, but not the text [duplicate]
  7. Is there any way to hover over one element and affect a different element? [duplicate]
  8. How to set opacity in parent div and not affect in child div? [duplicate]
  9. What has bigger priority: opacity or z-index in browsers?
  10. Drop shadow for PNG image in CSS
  11. Opacity of div’s background without affecting contained element in IE 8?
  12. Can you set a border opacity in CSS?
  13. image moves on hover – chrome opacity issue
  14. CSS opacity and child elements
  15. Background images: how to fill whole div if image is small and vice versa
  16. how to cancel opacity for a child element?
  17. Transparent hollow or cut out shape in HTML
  18. how to handle ‘double opacity’ of two overlapping divs
  19. What does the “~” (tilde/squiggle/twiddle) CSS selector mean?
  20. CSS attribute selectors: The rules on quotes (“, ‘ or none?)
  21. What is the difference between ‘>’ and a space in CSS selectors?
  22. Full-screen responsive background image
  23. Setting height: 100% on my label element doesn’t work
  24. Twitter Bootstrap – add top space between rows
  25. hover on child without hover effect on parent [duplicate]
  26. Bootstrap 3 Slide in Menu / Navbar on Mobile [closed]
  27. How do I Make Firefox Print a Background-Color Style?
  28. Is there any pros and cons if i use always CSS Class instead CSS ID for everything?
  29. How to use vertical align in bootstrap
  30. QT – CSS: decoration on focus

Leave a Comment