Blog We love to talk!

Nov Tue

Cross Browser Masks

  •  11-10-2015
cross browser testing

Masks is the method of displaying part of an element, using a selected image as a mask.

Browser Support

Sadly this feature is currently not supported by any browser.

Code Example

You can use Masks like this:

.clip-examples {

  clip-path: rectangle(x, y, width, height, rounded-x, rounded-y)
          
  clip-path: inset-rectangle(from top, from right, from bottom, from left, rounded-x, rounded-y)
  /* Looks like this is what rect() used to be like with clip */
  /* Will replace inset(), I suppose */

  clip-path: polygon(a, bunch, of, points)
  clip-path: circle(radius at x, y)
  clip-path: ellipse(radius-x, radius-y at x, y)

}

More Information

More information can be found here.

No Comments

Leave a Reply

Your email address will not be published.