Css – n inverse to the CSS “Clip” property; hide the clipped area

clipcssmask

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.

Best Answer

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/

Related Solutions

Javascript – How to force the browser to reload cached CSS and JavaScript files

This solution is written in PHP, but it should be easily adapted to other languages.

The original .htaccess regex can cause problems with files like json-1.3.js. The solution is to only rewrite if there are exactly 10 digits at the end. (Because 10 digits covers all timestamps from 9/9/2001 to 11/20/2286.)

First, we use the following rewrite rule in .htaccess:

RewriteEngine on
RewriteRule ^(.*)\.[\d]{10}\.(css|js)$ $1.$2 [L]

Now, we write the following PHP function:

/**
 *  Given a file, i.e. /css/base.css, replaces it with a string containing the
 *  file's mtime, i.e. /css/base.1221534296.css.
 *
 *  @param $file  The file to be loaded.  Must be an absolute path (i.e.
 *                starting with slash).
 */
function auto_version($file)
{
  if(strpos($file, '/') !== 0 || !file_exists($_SERVER['DOCUMENT_ROOT'] . $file))
    return $file;

  $mtime = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
  return preg_replace('{\\.([^./]+)$}', ".$mtime.\$1", $file);
}

Now, wherever you include your CSS, change it from this:

<link rel="stylesheet" href="/css/base.css" type="text/css" />

To this:

<link rel="stylesheet" href="<?php echo auto_version('/css/base.css'); ?>" type="text/css" />

This way, you never have to modify the link tag again, and the user will always see the latest CSS. The browser will be able to cache the CSS file, but when you make any changes to your CSS the browser will see this as a new URL, so it won't use the cached copy.

This can also work with images, favicons, and JavaScript. Basically anything that is not dynamically generated.

Css – CSS parent selector

There is currently no way to select the parent of an element in CSS.

If there was a way to do it, it would be in either of the current CSS selectors specs:

That said, the Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability. It will be similar to the jQuery implementation.

li:has(> a.active) { /* styles to apply to the li tag */ }

However, as of 2021, this is still not supported by any browser.

In the meantime, you'll have to resort to JavaScript if you need to select a parent element.

Best Answer

Related Solutions

Javascript – How to force the browser to reload cached CSS and JavaScript files

Css – CSS parent selector

Related Topic