diff --git a/_config.yml b/_config.yml
index 949fc62..e228da4 100644
--- a/_config.yml
+++ b/_config.yml
@@ -7,4 +7,6 @@ url: "http://webplatform.adobe.com"
# Build settings
markdown: kramdown
permalink: pretty
+gems:
+ - jekyll-redirect-from
exclude: [design]
diff --git a/_data/browser_support.yml b/_data/browser_support.yml
index 7d40f43..7342123 100644
--- a/_data/browser_support.yml
+++ b/_data/browser_support.yml
@@ -6,3 +6,21 @@ shapes:
- { name: Opera, support: support, version: 24 }
- { name: iOS, support: support, version: 8 }
- { name: Android, support: no-support, version: 4.4 }
+
+mask:
+ - { name: Internet Explorer, support: no-support, version: 11 }
+ - { name: Chrome, support: partial-support, version: 38 }
+ - { name: Firefox, support: partial-support, version: 33 }
+ - { name: Safari, support: partial-support, version: 5.1 }
+ - { name: Opera, support: partial-support, version: 25 }
+ - { name: iOS, support: partial-support, version: 7.1 }
+ - { name: Android, support: partial-support, version: 4.4 }
+
+clip-path:
+ - { name: Internet Explorer, support: no-support, version: 11 }
+ - { name: Chrome, support: partial-support, version: 38 }
+ - { name: Firefox, support: partial-support, version: 33 }
+ - { name: Safari, support: partial-support, version: 7 }
+ - { name: Opera, support: partial-support, version: 25 }
+ - { name: iOS, support: partial-support, version: 7.1 }
+ - { name: Android, support: partial-support, version: 4.4 }
diff --git a/_posts/2014-04-01-masking.md b/_posts/2014-04-01-masking.md
index a7ff22b..80bd3ad 100644
--- a/_posts/2014-04-01-masking.md
+++ b/_posts/2014-04-01-masking.md
@@ -1,30 +1,35 @@
---
layout: page
-title: "Clipping & Masking"
+title: "Masking"
categories: project
description: Clip content with custom shapes and soft edges.
-thumb: project_header/icon-clipping.svg
-full_image: project_header/icon-clipping.svg
-bg: e6b494
-permalink: clipping-and-masking
+thumb: project_header/icon-masking.svg
+full_image: project_header/icon-masking.svg
+bg: 445a79
+permalink: masking
---
-#Clipping & Masking
+#Masking
##What is it?
-Clipping takes a region of an element and prevents rendering - the element gets "clipped." Masking is using an image as coverage over an element, affecting the alpha channel of the element. Portions of a masked element are fully or partially transparent, and so the effect really comes from a combination of an element and the masking image.
+Masking is using an image as coverage over an element, affecting the alpha channel of the element. Portions of a masked element are fully or partially transparent, and so the effect really comes from a combination of an element and the masking image. Masking is similar to [clipping]({{site.baseurl}}/clipping/) in that they are both used to define what is visible.
+Masking uses an image for this and clipping uses shapes.
-The Adobe Web Platform team is contributing to the [CSS Masking Module Level 1](http://dev.w3.org/fxtf/css-masking-1/){:target="_blank"} specification, which aims to bring these two operations to the HTML world.
+The Adobe Web Platform team is contributing to the [CSS Masking Module Level 1](http://dev.w3.org/fxtf/css-masking-1/){:target="_blank"} specification, which aims to bring masking and
+clipping to the HTML world.
##When can I use it?
+{% assign browser_support = site.data.browser_support.mask %}
+{% include browser-support.html %}
+
Now in Chrome, Firefox and Safari. For a view of current and upcoming browser support, check out [caniuse.com](http://caniuse.com/#search=mask){:target="_blank"}.
##Where can I learn more?
@@ -33,7 +38,5 @@ Now in Chrome, Firefox and Safari. For a view of current and upcoming browser su
Also of interest:
- * [Clipping in CSS and SVG](http://sarasoueidan.com/blog/css-svg-clipping/){:target="_blank"} by [Sara Soueidan](http://sarasoueidan.com/){:target="_blank"}
- * [CSS Clipping on CodePen](http://codepen.io/search?q=css+clipping&limit=all&order=popularity&depth=everything){:target="_blank"}
* [CSS Masking on CodePen](http://codepen.io/search?q=css+masking&limit=all&order=popularity&depth=everything){:target="_blank"}
* [Making the Web Sweeter with Food Network and Cupcakes](http://blogs.adobe.com/webplatform/2014/01/16/making-the-web-sweeter/) by [CJ Gammon](https://twitter.com/cjgammon){:target="_blank"} goes over techniques used and provides [the demo source](https://github.com/adobe-webplatform/Demo-for-Food-Network-Cupcakes)
diff --git a/_posts/2014-04-02-clipping.md b/_posts/2014-04-02-clipping.md
new file mode 100644
index 0000000..ac25860
--- /dev/null
+++ b/_posts/2014-04-02-clipping.md
@@ -0,0 +1,44 @@
+---
+layout: page
+title: "Clipping"
+categories: project
+description: Clip content with custom shapes and soft edges.
+thumb: project_header/icon-clipping.svg
+full_image: project_header/icon-clipping.svg
+bg: e6b494
+redirect_from: /clipping-and-masking/
+permalink: clipping
+---
+#Clipping
+
+##What is it?
+
+Clipping takes a region of an element and prevents rendering - the element gets "clipped." Clipping is similar to [masking]({{site.baseurl}}/masking/) in that they are both used to
+define what is visible. The difference is that clipping uses predefined shapes to achieve this and masking uses images.
+
+
+
+The Adobe Web Platform team is contributing to the [CSS Masking Module Level 1](http://dev.w3.org/fxtf/css-masking-1/){:target="_blank"} specification, which aims to bring clipping
+and masking to the HTML world.
+
+##When can I use it?
+{% assign browser_support = site.data.browser_support.clip-path %}
+{% include browser-support.html %}
+
+Now in Chrome, Firefox and Safari. For a view of current and upcoming browser support, check out [caniuse.com](http://caniuse.com/#search=clip-path){:target="_blank"}.
+
+##Where can I learn more?
+
+[Razvan Caliman](http://razvancaliman.com/){:target="_blank"} provides a clear distinction between masking and clipping in his [Intro to CSS Masking](https://www.youtube.com/watch?v=vV3h5OetmSI){:target="_blank"} video.
+
+Also of interest:
+
+ * [CSS clip-path maker](http://bennettfeely.com/clippy/){:target="_blank"} by Bennett Feely
+ * [Clipping in CSS and SVG](http://sarasoueidan.com/blog/css-svg-clipping/){:target="_blank"} by [Sara Soueidan](http://sarasoueidan.com/){:target="_blank"}
+ * [CSS Clipping on CodePen](http://codepen.io/search?q=css+clipping&limit=all&order=popularity&depth=everything){:target="_blank"}
+ * [Making the Web Sweeter with Food Network and Cupcakes](http://blogs.adobe.com/webplatform/2014/01/16/making-the-web-sweeter/) by [CJ Gammon](https://twitter.com/cjgammon){:target="_blank"} goes over techniques used and provides [the demo source](https://github.com/adobe-webplatform/Demo-for-Food-Network-Cupcakes)
diff --git a/img/masking-summer.png b/img/masking-summer.png
new file mode 100644
index 0000000..17e8474
Binary files /dev/null and b/img/masking-summer.png differ