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.
- - Clipping & Masking + + Masking -
The Food Network's Cupcakes! app makes liberal use of of clipping and masking to create beautiful and engaging user experience.
+
Masking example on CodePen from Ludvig Lindblom
-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. + +
+ + Clipping + +
The Food Network's Cupcakes! app makes liberal use of of clipping and masking to create beautiful and engaging user experience.
+
+ +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