split clipping & masking into 2 pages. Fixes #85 and #126.

_config.yml

@@ -7,4 +7,6 @@ url: "http://webplatform.adobe.com"
 # Build settings
 markdown: kramdown
 permalink: pretty
+gems:
+  - jekyll-redirect-from
 exclude: [design]

_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 }

_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.
 
 <figure>
-  <a href="http://webplatform.adobe.com/Demo-for-Food-Network-Cupcakes/src/#page/view-cover">
-    <img src="{{site.baseurl}}/img/masking-dynamic.gif" alt="Clipping &amp; Masking">
+  <a href="http://codepen.io/ludviglindblom/pen/mbFax">
+    <img src="{{site.baseurl}}/img/masking-summer.png" alt="Masking">
   </a>
-  <figcaption>The Food Network's Cupcakes! app makes liberal use of of clipping and masking to create beautiful and engaging user experience.</figcaption>
+  <figcaption>Masking example on CodePen from Ludvig Lindblom</figcaption>
 </figure>
 
-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)

_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.
+
+<figure>
+  <a href="http://webplatform.adobe.com/Demo-for-Food-Network-Cupcakes/src/#page/view-cover">
+    <img src="{{site.baseurl}}/img/masking-dynamic.gif" alt="Clipping">
+  </a>
+  <figcaption>The Food Network's Cupcakes! app makes liberal use of of clipping and masking to create beautiful and engaging user experience.</figcaption>
+</figure>
+
+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)