15

The CSS clip syntax gets you to define a rectangular area of a larger image that you wish to be visible. Is there a way to specify the inverse? Specify the rectangular area of the image that you wish to become invisible. Like punching a rectangular hole through the page to see what's underneath?

Reason (if you have any other ideas): I want to create a 3 layer image in a CMS template. Layer 1 (at the bottom) is a background image. Layer 2 sits over a portion of layer 1 and is a rectangular screengrab image of an A4 document. Layer 3 (on the top) is a transparent PNG (in its centre and at its edges) that adds a border, drop shadow, doc type logo and a page curl effect to the top right of the layer 2 document.

Layers 1 and 2 will be uploaded separately in the CMS and the CSS should combine them together with the layer 3 image to create the effect. The problem is for the page curl effect to work, the top right corner of layer 2 needs to be masked so that you can see all the way through from layer 3 to layer 1. I was hoping that the clip property would allow me to specify a small square in the top right corner of layer 2 that should be invisible.

Alternative: Is to use a graphics program to combine layers 1 and 3 together and leave a transparent area for layer 2. Then with the correct positioning you could place the new combined image on top of layer 2 to achieve the same effect. However, I was hoping to avoid graphics preparation like this because you may as well create the entire image that way.

gunr2171
  • 16,104
  • 25
  • 61
  • 88
Dominic
  • 587
  • 3
  • 9
  • 19
  • Bizarre solution that comes into my mind: Draw the curl effect in Layer 3 and adding a background (same background of the Layer 1) to hide the corner. A bit sloppy but fast... – Arkana Apr 18 '13 at 08:55
  • Thanks for the comments. I had come across that link but I am worried that it might break badly on some browsers. I'm also trying to avoid graphics work that extends the amount of time it takes to replace any of the 3 layers. I did have another thought. I could make Layer 2 a PNG and manually cut off its corner (to be transparent) in the graphics program. My effect would work and replacing Layer 1 or Layer 3 across the site would be easy. – Dominic Apr 23 '13 at 11:13

1 Answers1

5

Simple Answer: CSS clip will not work for that.

I see two options:

  1. Try to fake the 'hole' by drawing Layer3 with Layer1 as a background image. This will make the transparent areas of Layer3 be filled with Layer1. You can see this solution in action here: http://cssfilter.saschaseewald.com/

  2. Use the HMTL Canvas Element and its composite actions to combine the layers as you like. Overview: http://www.html5canvastutorials.com/advanced/html5-canvas-global-composite-operations-tutorial/

Sascha Seewald
  • 51
  • 1
  • 2