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.

Photoshop Blending in a Canvas

I explained a bit about compositing and blending in a previous post, how Canvas blending lets you achieve in a Canvas the same kinds of blending effects you’d find in Photoshop.

Updated – September 24, 2013:
Canvas Blending is also supported on Firefox and iOS7 Safari

Programmatically working with the blend mode is pretty straightforward.  You just take your Canvas context and set the variable globalCompositeOperation:

var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'multiply';

If you’re viewing this post with Chrome and have turned on experimental Webkit features, or you’re running the latest stable version of Firefox or iOS7 Safari, you’ll be able to actually play with this feature below.  Try experimenting with the blend mode and/or color and then drawing on the image.

Check out this Pen!

If the blending is not working for you above, check out this video:

 

 

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

Adobe Create Now World Tour

The Adobe Create Now World Tour is about to kick off and if you want to learn about all the latest and greatest with Adobe® Photoshop® CC, Illustrator® CC, InDesign® CC, Dreamweaver® CC, After Effects® CC, Premiere® Pro CC, and much more, I highly suggest you attend one of these free events.

In truth, if you just plain want to get inspired, I’d suggest going.  The events are free and you’ll get to learn from the pros.

Here are the dates and how to register for an event near you:

http://adobe.ly/CCWorldTour

Oh, and if you’re thinking, “Yeah, I’ll do that later when I have time”, the first event is on September 19th, 2013, so don’t wait too long.