Menu
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.
799
The clip property applies only to absolutely positioned elements — that is, elements with position:absolute or position:fixed .
The clip property lets you specify a rectangle to clip an absolutely positioned element. The rectangle is specified as four coordinates, all from the top-left corner of the element to be clipped. Note: The clip property does not work if "overflow:visible".
Syntax: clip: rect(top, right, bottom, left); Example: This example illustrates the use of the clip property whose value is set to the specific shape that clips the specified portion of an element.
Simple Answer: CSS clip will not work for that.
I see two options:
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/
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/
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
