Presentation on SVG Filters, CSS Filters & Blend Modes

Screen Shot 2015-08-014

I’ve just posted the presentation I gave at the HTML5 Developer Conference in San Francisco.  There are tons of good links to demos on creating SVG Filters that apply to both SVG content and HTML content, CSS Filters, Blend modes and even a few surprises.


Designing and Debugging Web Layouts With CSS Regions

Screen Shot 2013-10-04 at 3.07.59 PM

The adoption of CSS Regions is definitely moving along swiftly.  They are now supported in Mobile Safari on iOS7, Opera, Chrome Canary, Chrome Stable & WebKit nightly. Browser support continues to evolve and can be tracked here.

CSS Regions allow you to define content that can “flow” through a series of defined regions on the page, so you can create magazine-type layouts and responsive websites through simple CSS.  I wrote about how you can use CSS Regions for creating responsive content in an earlier article.  I’d definitely recommend reading that before continuing here if you haven’t already done so.  It should give you a good basic understanding of how CSS Regions work.

Defining one piece of HTML markup as the source for another piece of markup is an extremely powerful, but very different way of thinking about Web page layout. You’re very likely going to want good authoring tools, and the ability to debug in-browser to figure what’s going on when your site behaves unexpectedly.

What we’ll describe here are some options for authoring and debugging Web layouts that use CSS Regions.

Continue reading

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

Screen Shot 2015-08-13 at 3.30.42 PM

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

Screen Shot 2013-09-16 at 11.48.56 AM

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

Screen Shot 2013-09-10 at 6.05.08 PM

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:

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.


Cross-Browser Responsive Content with CSS Regions

In a recent post I described how you could use CSS Regions to easily create responsive content. One of the limitations mentioned though was that CSS Regions at present are natively supported only on Webkit nightly and Chrome Canary and Chrome Stable.

There is however the CSS Regions polyfill code up on GitHub to consider. I looked at that last year and it was a bit slow and problematic at the time.  It turns out though that there have been several improvements to the code in the interim and it works quite nicely and is quite performant now.  Let’s take a look…

Check out this Pen!

You can’t see it when the Codpen has been embedded in this post, but I’ve included cssregions.min.js in the JS tab.

Take a look at the CSS Tab.  Notice the new -adobe-flow-into and -adobe-flow-from CSS attributes:

#source {
  -adobe-flow-into: main-thread;
  -webkit-flow-into: main-thread;
  flow-into: main-thread;

.region {
  -adobe-flow-from: main-thread; 
  -webkit-fow-from: main-thread;
  flow-from: main-thread;

These new attributes are recognized by the polyfill.  They work the same as the -webkit-flow-into/from and flow-into/from attributes.  The polyfill code will detect and use any native implementations that exist so you don’t have to do anything special.  Everything should work exactly as it did before on WebKit and Chrome, but now it will also work on iOS4+, Android 4+, Firefox, Safari 5+, and Opera.   That’s right, mobile too!

Go ahead and view this post with the other browsers and devices listed above. The Codepen demo should work just fine (let me know if it doesn’t!).



Responsive Content Using CSS Regions

Screen Shot 2013-08-16 at 2.11.43 PM

CSS Regions allow content to flow across multiple areas of the display, called regions.  The beauty of CSS Regions is that you can separate the content from the layout.  And with that comes the ability to create some responsive content very easily.

Update August 29, 2013: 

I have a new post describing Cross-Browser Responsive Content Using CSS Regions.  I describe there how you can do exactly what is described here, but also use the CSS Regions polyfill to get CSS Regions support on many other browser and devices.

Continue reading

Practical Gradient Map Use Case

Screen Shot 2013-08-13 at 5.51.19 PM

I’ve been writing a few posts about the new gradientmaps.js library, and it occurred to me that gradient maps are a little hard to get your head around.  How would you use them in a real-world scenario?  From a pure creativity standpoint, they’re a no-brainer.  But are there any practical use cases?

Here’s a thought.  Say you’re selling shirts on your website.  You’re able to print the shirts in a myriad of colors and want to let the consumer pick the color they want.  In order to implement this, you could have an image for every possible color, or you could do the following (only works in Chrome & Firefox at present, sorry):

Check out this Pen!

In the above example, when you click on the color button and select a color, that new color is used as the right edge of a color gradient which starts with black.  So, if you choose red, the color gradient will go from black to red.  The image of the shirt you see has a transparent background.  And, if you’ll notice if you look at the JS tab, the start of the gradient is actually transparent itself “rgba(0, 0, 0, 0)”.  This is so we don’t recolor the background itself.

The resulting gradient is then applied to the image using:

GradientMaps.applyGradientMap($('img').get(0), gradient);

gradientmaps.js makes use of SVG filters being applied to HTML content.  At present that is only supported on Chrome and Firefox.

Pretty easy, and pretty useful. Play around with it and let me know what you think.

Implementing the Duotone Filter with an SVG Filter

Screen Shot 2013-08-12 at 1.29.36 PM

In a recent post I described a duotone CSS Custom Filter I had built that allowed you to take a black and white image, and remap the black and white colors to two other specified colors.  Say you have a t-shirt website.  You could provide a single black and white image, and users could choose the color they want.

In the original implementation I used CSS Custom Filters, which are a little overkill for this use, and they are currently only supported on Chrome.  Here we’re going to do the same thing, using an SVG Filter.  SVG Filters are currently supported on both Chrome and Firefox and stand a much better chance of being implemented in other browsers sooner rather than later.

In particular, we’re going to use the ComponentTransfer filter primitive, described in more detail in this post.

Let’s take a look at the following SVG implementation (best viewed on Chrome and/or Firefox):

Check out this Pen!

When you click on either the black or white color remapping buttons, JavaScript is executed which recalculates the transfer functions for the feComponentTransfer filter primitives for each color channel.

In the following demo:

Check out this Pen!

We don’t use any JavaScript.  Instead, we’re using the SVG animate primitive to animate the table values of each transfer function (feFuncR, feFuncG, feFuncB).

For both of these examples, click on the HTML, CSS and JS tabs to see what’s going on and let me know if you have any questions.

As you can see, SVG filters are extremely powerful and worth learning more about.  Using them to manipulate HTML content is currently only supported on Chrome and Firefox but it looks very promising that they’ll be supported on all browsers before too long.

Advanced Gradient Map Usage

Screen Shot 2013-08-06 at 6.23.57 PM

As you can read here, I’ve just open sourced gradientmaps.js, a library that allows you to apply Photoshop-like gradient maps to HTML content in Chrome and Firefox.

Now that the library is out there, let’s have a little fun. Continue reading

Announcing gradientmaps.js



I’ve just released gradientmaps.js on Github. You can use this library to apply gradient maps to any HTML content using SVG filters. You can find all the details on the Adobe Web Platform team blog:

The library makes use of SVG filters. As indicated on this table of browser support for CSS graphics, applying SVG filters to HTML content is currently supported only on Chrome and Firefox at present.

Check it out, it’s a ton o’ fun.

Fun with SVG Filters

Screen Shot 2013-07-13 at 12.39.56 AM

I’ve been playing around with SVG Filters lately, and let me tell you, I’ve been having a ton of fun.  The best part is, you don’t have to know a lot about SVG here.  The filters, defined in embedded SVG can be applied to your HTML content with CSS.  Once you figure out what filters are available, and how to configure them, it’s really straightforward. Continue reading

The state of CSS & Graphics

I don’t know about you, but I find that keeping track of what graphics-related CSS properties are supported in what browser, and under what conditions, and with which vendor prefix, is a little daunting. is extremely helpful for this, but it’s still not very easy to find out things like, ‘Under what conditions can I apply a clip path to HTML vs SVG?’  Chrome supports both -webkit-clip-path and clip-path.  What’s the difference?

To answer this question, I’ve created a new GitHub repo: css-graphics

The repo consists of a simple table that attempts to answer these questions.  Please, please, please, if you find this useful and you see some out of date or incomplete information, make the change and do a pull request.  I’d love to see this kept up to date and kept useful.

Yes, I know the table is pretty sparse right now.  I need to add information on CSS regions, compositing & blending, shapes and more.  It would also be good to somehow specify if you have to turn on a custom flag to enable the feature.  But don’t let me get in the way, please help me keep this up to date.

Understanding Compositing and Blending


With Canvas blending now in Chrome Canary, WebKit Nightly and Firefox, it’s a good idea to start getting your head wrapped around this spec.  It seems to be moving along nicely and is starting to show up in more and more browsers. Continue reading

CSS Exclusions and Shapes Split Into 2 Specs

Screen Shot 2013-06-10 at 5.01.19 PM

It can often take several years for a W3C spec to go from initial submission (a W3C member submitted a suggestion for a Web standard) to final recommendation status. Often though, a spec is split up into multiple independent  specs to allow each spec to evolve independently, and hopefully faster.

This is what recently happened with the CSS Exclusions & Shapes Specification.  Exclusions and Shapes are in fact two independent features.  Different people could and should therefore be working on the two specs independently rather than having everyone make decisions about both features.  So now we have CSS Exclusions and CSS Shapes. Continue reading

Twitter Bootstrap typeahead.js with underscore.js Templating – A Tutorial

Screen Shot 2013-06-04 at 9.41.17 PM

In a previous post, I described how to use the Twitter Bootstrap Typeahead component. The Twitter Bootstrap team recently announced however that they would be switching to Twitter’s typeahead.js for the next major release. That sounds pretty great to me.  typeahead.js is much more powerful than the current Twitter Bootstrap typehead component. Fortunately, since typeahead.js is already available, you don’t have to wait for Twitter Bootstrap v3 to start using it. Using typeahead.js with Twitter Bootstrap isn’t very well documented just yet.  As well, there is no documentation to be found on how to use Underscore.js templates with typeahead.js, so I thought I’d help you along here. Continue reading

Duotone Custom Filter

Screen Shot 2013-05-30 at 5.09.08 PM

Say you have a black & white image and want to display it in many different 2-color schemes.


You have a few options here.  You could draw the image in a canvas and then use JavaScript to manipulate each pixel.  Or you could in theory convert your black & white image to SVG and then use CSS to manipulate the colors.  That’s probably a pretty decent solution.

Or you could use the new duotone CSS custom filter I’ve built.  You can find the source for the new filter on Github here. Continue reading