{"id":331047,"date":"2020-12-18T13:11:00","date_gmt":"2020-12-18T21:11:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=331047"},"modified":"2021-05-27T12:22:03","modified_gmt":"2021-05-27T19:22:03","slug":"mask-clip","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-clip\/","title":{"rendered":"mask-clip"},"content":{"rendered":"\n<p>The <code>mask-clip<\/code> CSS property is part of the <a href=https://css-tricks.com/"https:////drafts.fxtf.org//css-masking-1//#the-mask-clip\" rel=\"noopener\">CSS Masking Module Level 1<\/a> specification, and sets the mask painting area. It literally clips the background area of an element and defines which areas show through the mask: <a href=https://css-tricks.com/"https:////css-tricks.com//the-css-box-model///">border, padding or content box<\/a>. It\u2019s sort of like putting the frame on a photo, showing only the parts of the photo that aren\u2019t covered by the frame. Only, in this case, we\u2019re setting what gets clipped using CSS Box Model values.<\/p>\n\n\n\n<!--more-->\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  mask-image: url(sun.svg);\n  mask-clip: padding-box;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzGwZjb\" src=https://css-tricks.com/"////codepen.io//anon//embed//YzGwZjb?height=750&amp;theme-id=1&amp;slug-hash=YzGwZjb&amp;default-tab=result\%22 height=\"750\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzGwZjb\" title=\"CodePen Embed YzGwZjb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This works like the <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//b//background-clip///">background-clip<\/a><\/code> property, except it has three additional values that apply to SVG elements. In the following demo you can change the mask painting area using this property. There is the same image underneath to show the effect of masking better and marking the border and padding areas:<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">mask-clip: &lt;geometry-box> = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip\n<\/code><\/pre>\n\n\n\n<ul class=\"ticss-f33ad05a\"><li><strong>Initial value:<\/strong> <code>border-box<\/code><\/li><li><strong>Applies to:<\/strong> all elements. In SVG, it applies to container elements excluding the <code>&lt;defs&gt;<\/code> element, all graphics elements.<\/li><li><strong>Inherited:<\/strong> no<\/li><li><strong>Animation type:<\/strong> discrete<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Keyword values *\/\nmask-clip: border-box;\nmask-clip: content-box;\nmask-clip: fill-box;\nmask-clip: margin-box;\nmask-clip: padding-box;\nmask-clip: stroke-box;\nmask-clip: view-box;\n\n\/* No clip *\/\nmask-clip: no-clip;\n\n\/* Global values *\/\nmask-clip: intial;\nmask-clip: inherit;\nmask-clip: unset;\n<\/code><\/pre>\n\n\n\n<ul><li><strong><code>border-box<\/code>:<\/strong> The painted content is clipped to the border box. (Default value)<\/li><li><strong><code>content-box<\/code>:<\/strong> The painted content is clipped to the content box.<\/li><li><strong><code>fill-box<\/code>:<\/strong> The painted content is clipped to the object bounding box.<\/li><li><strong><code>margin-box<\/code>:<\/strong> The painted content is clipped to the margin box.<\/li><li><strong><code>padding-box<\/code>:<\/strong> The painted content is clipped to the padding box.<\/li><li><strong><code>stroke-box<\/code>:<\/strong> The painted content is clipped to the stroke bounding box.<\/li><li><strong><code>view-box<\/code>:<\/strong> Uses the nearest SVG viewport as reference box. If a <code>viewBox<\/code> attribute is specified for the SVG viewport creating element:<ul><li>The reference box is positioned at the origin of the coordinate system established by the <code>viewBox<\/code> attribute.<\/li><li>The dimension of the reference box is set to the <code>width<\/code> and <code>height<\/code> values of the <code>viewBox<\/code> attribute.<br><\/li><\/ul><\/li><li><strong><code>no-clip<\/code>:<\/strong> The painted content is not clipped.<br><\/li><li><strong><code>initial<\/code>:<\/strong> Applies the property\u2019s default setting, which is <code>border-box<\/code>.<\/li><li><strong><code>inherit<\/code>:<\/strong> Adopts the <code>mask-clip<\/code> value of the parent.<\/li><li><strong><code>unset<\/code>:<\/strong> Removes the current <code>mask-clip<\/code> from the element.<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-notes\">Notes<\/h4>\n\n\n<ul><li>For SVG elements without associated CSS layout box, the values <code>content-box<\/code>, <code>padding-box<\/code> compute to <code>fill-box<\/code> and for <code>border-box<\/code> and <code>margin-box<\/code> compute to <code>stroke-box<\/code>.<\/li><li>For elements with associated CSS layout box, the values <code>fill-box<\/code> compute to <code>content-box<\/code> and for <code>stroke-box<\/code> and <code>view-box<\/code> compute to the initial value of <code>mask-clip<\/code> which is <code>border-box<\/code>.<\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-using-multiple-values\">Using multiple values<\/h4>\n\n\n<p>This property can take a comma-separated list of values for mask clips and each value is applied to a corresponding mask layer image specified in the <code>mask-image<\/code> property. In the following example, the first value specifies the mask painting area of the first image, the second value specifies the mask painting area of the second image, and so on.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  mask-image: url(image1.png), url(image2.png), url(image3.png);\n  mask-clip: padding-box, border-box, content-box;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\">Demo<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaLjrgE\" src=https://css-tricks.com/"////codepen.io//anon//embed//BaLjrgE?height=650&amp;theme-id=1&amp;slug-hash=BaLjrgE&amp;default-tab=result\%22 height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaLjrgE\" title=\"CodePen Embed BaLjrgE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">79+<\/td><td class=\"has-text-align-center\" data-align=\"center\">53+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">4+<\/td><td class=\"has-text-align-center\" data-align=\"center\">15+<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1679a4e0\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera Mobile<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><td class=\"has-text-align-center\" data-align=\"center\">59+<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=https://css-tricks.com/"https:////caniuse.com//mdn-css_properties_mask-clip/" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\">More information<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card articles\" id=\"mini-post-331047\">\n\n  <time datetime=\"2014-12-02\" title=\"Originally published Dec 18, 2020\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 6, 2016  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//clipping-masking-css///">\n      Clipping and Masking in CSS    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card beginner\" id=\"mini-post-331047\">\n\n  <time datetime=\"2017-06-07\" title=\"Originally published Dec 18, 2020\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 7, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//masking-vs-clipping-use///">\n      Masking vs. Clipping: When to Use Each    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//sdrasner///" aria-label=\"Author page of Sarah Drasner\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//48cfd8342f9b9e5b7970f63afb0a8ee3?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/48cfd8342f9b9e5b7970f63afb0a8ee3?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//sdrasner///">\n      Sarah Drasner    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-331047\">\n\n  <time datetime=\"2020-05-13\" title=\"Originally published Dec 18, 2020\">\n    <strong>\n                \n      Video\n      <\/strong>\n\n    on\n\n    May 13, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//videos//185-playing-with-css-masks///">\n      #185: Playing with CSS Masks    <\/a>\n  <\/h3>\n\n      <time>\u25b6 Running Time: <span>23:32<\/span><\/time>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"h-related-properties\">Related properties<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-331047\">\n\n  <time datetime=\"2020-12-18\" title=\"Originally published Dec 18, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 27, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-clip///">\n      mask-clip    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-clip///" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-clip: padding-box; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///" aria-label=\"Author page of Mojtaba Seyedi\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//7b9f5e341bcb99d32f140c1f08f32f3a?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-331047\">\n\n  <time datetime=\"2020-03-29\" title=\"Originally published Dec 18, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 10, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-image///">\n      mask-image    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-image///" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-image: url(star.svg); }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-331047\">\n\n  <time datetime=\"2021-02-03\" title=\"Originally published Dec 18, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 10, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-mode///">\n      mask-mode    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-mode///" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-mode: alpha; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///" aria-label=\"Author page of Mojtaba Seyedi\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//7b9f5e341bcb99d32f140c1f08f32f3a?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-331047\">\n\n  <time datetime=\"2020-10-29\" title=\"Originally published Dec 18, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 10, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-origin///">\n      mask-origin    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-origin///" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-origin: content-box; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///" aria-label=\"Author page of Mojtaba Seyedi\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//7b9f5e341bcb99d32f140c1f08f32f3a?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-331047\">\n\n  <time datetime=\"2020-10-12\" title=\"Originally published Dec 18, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 10, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-position///">\n      mask-position    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-position///" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-position: 20px center; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///" aria-label=\"Author page of Mojtaba Seyedi\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//7b9f5e341bcb99d32f140c1f08f32f3a?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-331047\">\n\n  <time datetime=\"2020-04-24\" title=\"Originally published Dec 18, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 10, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-repeat///">\n      mask-repeat    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-repeat///" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-repeat: repeat-y; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-331047\">\n\n  <time datetime=\"2020-09-23\" title=\"Originally published Dec 18, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Jun 14, 2022  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-size///">\n      mask-size    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-size///" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-size: 200px 100px; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///" aria-label=\"Author page of Mojtaba Seyedi\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//7b9f5e341bcb99d32f140c1f08f32f3a?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-331047\">\n\n  <time datetime=\"2021-03-02\" title=\"Originally published Dec 18, 2020\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    May 13, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-type///">\n      mask-type    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//mask-type///" class=\"almanac-example\">\n      <code class=\"language-css\">.element { mask-type: alpha; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///" aria-label=\"Author page of Mojtaba Seyedi\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//7b9f5e341bcb99d32f140c1f08f32f3a?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The mask-clip CSS property is part of the CSS Masking Module Level 1 specification, and sets the mask painting area. [&hellip;]<\/p>\n","protected":false},"author":4997,"featured_media":0,"parent":13935,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/331047"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/4997"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=331047"}],"version-history":[{"count":11,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/331047\/revisions"}],"predecessor-version":[{"id":343399,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/331047\/revisions\/343399"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13935"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=331047"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=331047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}