CSS clip-path landed in WebKit. Chrome Canary has it (-webkit-clip-path) for testing.  clip-path allows you to clip DOM content to an SVG shape. Right now, just the basic shapes (circle, rect, polygon) are supported. Soon you'll be able to reference any SVG <clipPath> shape.

// DEMO: save this snippet as a bookmarklet and click it on any webpage:
---
javascript:(function(){function d(a,c){document.body.style.webkitClipPath="circle("+a+"px, "+c+"px, "+b+"px)"}var b=90;window.addEventListener("mousemove",function(a){d(a.pageX,a.pageY)});window.addEventListener("mousewheel",function(a){if(a.shiftKey){a.preventDefault();var c=a.wheelDeltaY;b+=-c;b=0<c?Math.max(90,b):Math.min(b,window.innerHeight/2);d(a.pageX,a.pageY)}})})();
--

full source: https://gist.github.com/3723309

w3c spec: http://dvcs.w3.org/hg/FXTF/raw-file/tip/masking/index.html#the-clip-path
Shared publiclyView activity