Clip Paths & Blending Demos Updated for Mobile, Supported on iOS7

The recent release of iOS7 brings many new exciting features to mobile Safari.  I’m going to be writing about this in more details shortly. In the meantime, I’ve updated my CSS Clip Paths and Canvas Blend mode demos to support touch events so you can try them out for yourself on your iPhone/iPad running iOS7.

Here is the updated interactive clip paths demo:

Check out this Pen!

Try grabbing the clip path points and moving them around with your finger (or of course your mouse if you’re viewing this on your desktop version of Chrome (and ultimately Safari on Mavericks).

And here is the updated canvas blend mode demo:

Check out this Pen!

Trying drawing on the image with your finger or mouse.  It also supports multi-touch.  You should be able to draw with up to 3 fingers simultaneously.

That’s it for now.  Have fun with that.  I’ll be following up shortly with a roundup of many of the new Web standards that have been implemented with the new release of Safari.

Interactive CSS Clip Paths

Did you know that on Chrome you can specify complex clip paths for your content very easily using the clip-path CSS property?

With the standard clip property, you can specify a rectangular clipping area for absolutely positioned elements, as in:

mycontent: {
   position: absolute;
   clip: rect(5px, 100px, 100px, 5px);
}

If you ask me, that’s of pretty limited use.

With the clip-path property (-webkit-clip-path on Chrome) however, you can specify any of the following 4 basic shapes for clipping:

  • rectangle(<top>, <left>, <width>, <height>, <rx>, <ry>)  – rectangle with a top, left, width, height and optional rounded corner radii
  • circle(<cx>, <cy>, <r>) – circle with a center and radius
  • ellipse(<cx>, <cy>, <rx>, <ry>) – ellipse with a center and x and y radii
  • polygon(<x1> <y1>, <x2> <y2>, …, <xn> <yn>) – polygon with a list of points

Continue reading