1 files changed, 150 insertions, 0 deletions
diff --git a/files/pt-br/web/css/mask/index.html b/files/pt-br/web/css/mask/index.html
new file mode 100644
index 0000000000..4b7f7f52d5
--- /dev/null
+++ b/files/pt-br/web/css/mask/index.html
@@ -0,0 +1,150 @@
+---
+title: mask
+slug: mask
+tags:
+  - CSS
+  - Compatibilidade Mobile
+  - Internet
+  - Layout
+  - Referencia
+  - SVG
+  - Web
+  - máscaras
+translation_of: Web/CSS/mask
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Resumo">Resumo</h2>
+
+<p><span id="result_box" lang="pt"><span class="hps">A propriedade</span> <span class="hps">máscara</span> <span class="alt-edited hps">no</span> <span class="hps">CSS</span> <span class="hps">permite aos usuários</span> alterarem <span class="hps">a visibilidade de</span> <span class="hps">um item</span> <span class="hps">parcialmente ou</span> <span class="hps">totalmente</span> <span class="hps">escondendo o</span> <span class="hps">item.</span> <span class="alt-edited hps">Isso é obtido</span> <span class="hps">por qualquer</span> <span class="hps">mascaramento</span> <span class="hps">ou</span> <span class="hps">cortes na imagem</span> <span class="hps">em pontos específicos</span><span>.</span></span></p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Sintaxe">Sintaxe</h2>
+
+<pre class="brush:css">/* Palavra-Chave */
+mask: none;
+
+/* Valor das Imagens */
+mask: url(mask.png);                       /* Imagem bitmap usada da máscara */
+mask: url(masks.svg#star);                 /* Elemento dentro do SVG usado como máscara */
+
+/* Valores Combinados */
+mask: url(masks.svg#star) luminance;       /* Elemento dentro do SVG usado como máscara de luminância */
+mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro do SVG usado como máscara posicionada 40px do topo e 20px da esquerda */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro do SVG usado como máscara com a largura e altura de 50px */
+mask: url(masks.svg#star) repeat-x;        /* Elemento dentro do SVG usado como máscara repedida horizontalmente */
+mask: url(masks.svg#star) stroke-box;      /* Elemento dentro do SVG usado como máscara extendendo-se até a caixa delimitada pela linha */
+mask: url(masks.svg#star) exclude;         /* Elemento dentro do SVG usado como máscara e combinado com o fundo usando partes que não se sobrepõem */
+
+/* Valores Globais */
+mask: inherit;
+mask: initial;
+mask: unset;
+</pre>
+
+<h3 id="Valores">Valores</h3>
+
+<p>Se o valor é um valor URI, o elemento apontado pelo URI é usado como uma máscara SVG.</p>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Exemplos">Exemplos</h2>
+
+<pre class="brush: css">.target { mask: url(#c1); }
+
+.anothertarget { mask: url(resources.svg#c1); }
+</pre>
+
+<h2 id="Especificações">Especificações</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificação</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentário</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("CSS Masks", "#the-mask", 'mask')}}</td>
+   <td>{{Spec2("CSS Masks")}}</td>
+   <td><span id="result_box" lang="pt"><span class="hps">Estende-se</span> <span class="hps">a sua utilização</span> <span class="hps">para</span> <span class="hps">elementos HTML</span><span>.</span><br>
+    <span class="hps">Estende</span> <span class="hps">sua sintaxe</span><span>, tornando-a</span> <span class="hps">uma simplificação para</span> <span class="hps">as novas</span> <span class="hps">propriedades</span> <span class="hps">da </span></span><code>mask-*</code> <span id="result_box" lang="pt"><span class="hps">definidos nessa</span> <span class="hps">especificação.</span></span></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}</td>
+   <td>{{Spec2('SVG1.1')}}</td>
+   <td>Definição inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico (para o SVG)</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}} [*]</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+   <td>{{CompatVersionUnknown}}</td>
+  </tr>
+  <tr>
+   <td><span class="short_text" id="result_box" lang="pt"><span class="hps">Aplica-se a</span> <span class="hps">elementos</span> <span class="hps">HTML</span></span></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}} [*]</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Característica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Suporte Básico</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[*] A partir do Gecko 10.0 {{geckoRelease("10.0")}}, <span class="short_text" id="result_box" lang="pt"><span class="hps">o espaço de cor</span> <span class="hps">padrão</span> <span class="hps">ao manusear</span> <span class="hps">máscaras é</span> <span class="hps">sRGB</span></span>; anteriormente, o padrão <span class="short_text" id="result_box" lang="pt"><span class="hps">(</span><span class="alt-edited hps">suportado apenas</span> <span class="hps">espaço de cor</span></span>) era linearRGB. <span id="result_box" lang="pt"><span class="hps">Isso muda</span> <span class="hps">a aparência de</span> <span class="hps">efeitos de máscara</span><span>, mas</span> <span class="hps">traz</span> o <span class="hps">Gecko</span> <span class="hps">em</span> <span class="hps">conformidade</span> <span class="hps">com a segunda edição</span> <span class="hps">da especificação</span> <span class="hps">SVG</span> <span class="hps">1.1.</span></span></p>
+
+<h2 id="Veja_também">Veja também</h2>
+
+<ul>
+ <li>{{Cssxref("clip-path")}}, {{Cssxref("filter")}}</li>
+ <li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Aplicanto efeitos SVG no conteúdo HTML</a></li>
+ <li><a href="/en-US/docs/SVG">SVG</a></li>
+</ul>