diff options
Diffstat (limited to 'files/es/web/css/-webkit-mask/index.html')
-rw-r--r-- | files/es/web/css/-webkit-mask/index.html | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/files/es/web/css/-webkit-mask/index.html b/files/es/web/css/-webkit-mask/index.html new file mode 100644 index 0000000000..59b3a02370 --- /dev/null +++ b/files/es/web/css/-webkit-mask/index.html @@ -0,0 +1,124 @@ +--- +title: '-webkit-mask' +slug: Web/CSS/-webkit-mask +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/mask +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<h2 id="Resumen">Resumen</h2> + +<p>La propiedad <code>-webkit-mask</code> es una manera corta de establecer, en un único sitio en una hoja de estilos, los valores individuales de máscara. <code>-webkit-mask </code> puede ser utilizado para fijar los valores en una o más de las siguiente propiedades: {{Cssxref("-webkit-mask-image")}}, {{Cssxref("-webkit-mask-repeat")}}, {{Cssxref("-webkit-mask-attachment")}}, {{Cssxref("-webkit-mask-position")}}, {{Cssxref("-webkit-mask-origin")}}, y {{Cssxref("-webkit-mask-clip")}}.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Síntaxis">Síntaxis</h2> + +<pre class="brush:css">/* Palabras clave valor */ +-webkit-mask: none; + +/* Valores de imágene */ +-webkit-mask: url(mask.png); /* Imagen de pixel usado coo máscara */ +-webkit-mask: url(masks.svg#star); /* Elemento dentro de un gráfico SVG usado como máscara */ +-webkit-mask: linear-gradient(transparent, black); /* Gradiente usado como máscara */ + +/* Valores combinados */ +-webkit-mask: url(masks.svg#star) 40px 20px; /* Elemento dentro de un gráfico SVG usado como máscara y posicionado 40px desde la parte superior y 20px a la izquierda */ +-webkit-mask: url(masks.svg#star) 0 0/50px 50px; /* Elemento dentro de un gráfico SVG usado como máscara con una anchura y altura de 50px */ +-webkit-mask: url(masks.svg#star) repeat-x; /* Elemento dentro de un gráfico SVG usado como una máscara que se repite horizontalmente */ +-webkit-mask: url(masks.svg#star) border; /* Elemento dentro de un gráfico SVG usado como una máscara que sobrepasa la caja que rodea el borde */ +-webkit-mask: url(masks.svg#star) text; /* Elemento dentro de un gráfico SVG usado como una máscara que recorta el texto que contiene */ + +/* Valores globales */ +-webkit-mask: inherit; +-webkit-mask: initial; +-webkit-mask: unset; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt>mask-image</dt> + <dd><em>Requierido</em>.Ver {{Cssxref("-webkit-mask-image")}}.</dd> + <dt>mask-repeat</dt> + <dd><em>Opcional</em>. Ver {{Cssxref("-webkit-mask-repeat")}}.</dd> + <dt>mask-attachment</dt> + <dd><em>Opcional</em> Ver {{Cssxref("-webkit-mask-attachment")}}.</dd> + <dt>mask-position</dt> + <dd><em>Opcional</em>. Ver {{Cssxref("-webkit-mask-position")}}.</dd> + <dt>mask-origin</dt> + <dd><em>Opcional</em>. Ver {{Cssxref("-webkit-mask-origin")}}.</dd> + <dt>mask-clip</dt> + <dd><em>Opcional</em> Ver {{Cssxref("-webkit-mask-clip")}}.</dd> +</dl> + +<h3 id="Síntaxis_Formal">Síntaxis Formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<pre class="brush: css">.example { + -webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding; +} +</pre> + +<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos 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>Soporte básico</td> + <td>1.0</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>4.0</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>Soporte básico</td> + <td>2.1</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}</li> +</ul> |