Máscara-clip - Trucos CSS

Anonim

La mask-clippropiedad CSS es parte de la especificación de nivel 1 del módulo de enmascaramiento CSS y establece el área de pintura de la máscara. Literalmente recorta el área de fondo de un elemento y define qué áreas se muestran a través de la máscara: borde, relleno o cuadro de contenido. Es como poner el marco en una foto, mostrando solo las partes de la foto que no están cubiertas por el marco. Solo que, en este caso, estamos configurando lo que se recorta usando los valores del modelo de caja CSS.

.element ( mask-image: url(sun.svg); mask-clip: padding-box; )

Esto funciona como la background-clippropiedad, excepto que tiene tres valores adicionales que se aplican a los elementos SVG. En la siguiente demostración, puede cambiar el área de pintura de la máscara usando esta propiedad. Hay la misma imagen debajo para mostrar el efecto de enmascarar mejor y marcar el borde y las áreas de relleno:

Sintaxis

mask-clip: = margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box | no-clip
  • Valor inicial: border-box
  • Se aplica a: todos los elementos. En SVG, se aplica a los elementos contenedores excluyendo el elemento, todos los elementos gráficos.
  • Heredado: no
  • Tipo de animación: discreto

Valores

/* Keyword values */ mask-clip: border-box; mask-clip: content-box; mask-clip: fill-box; mask-clip: margin-box; mask-clip: padding-box; mask-clip: stroke-box; mask-clip: view-box; /* No clip */ mask-clip: no-clip; /* Global values */ mask-clip: intial; mask-clip: inherit; mask-clip: unset;
  • border-box: El contenido pintado se recorta en el cuadro de borde. (Valor por defecto)
  • content-box: El contenido pintado se recorta en el cuadro de contenido.
  • fill-box: El contenido pintado se recorta en el cuadro delimitador del objeto.
  • margin-box: El contenido pintado se recorta en el cuadro de margen.
  • padding-box: El contenido pintado se recorta en la caja de relleno.
  • stroke-box: El contenido pintado se recorta en el cuadro delimitador del trazo.
  • view-box: Utiliza la ventana gráfica SVG más cercana como cuadro de referencia. Si viewBoxse especifica un atributo para el elemento de creación de la ventana gráfica SVG:
    • El cuadro de referencia se coloca en el origen del sistema de coordenadas establecido por el viewBoxatributo.
    • La dimensión del cuadro de referencia se establece en los valores widthy heightdel viewBoxatributo.
  • no-clip: El contenido pintado no se recorta.
  • initial: Aplica la configuración predeterminada de la propiedad, que es border-box.
  • inherit: Adopta el mask-clipvalor del padre.
  • unset: Elimina la corriente mask-clipdel elemento.

Notas

  • Para los elementos SVG sin caja de diseño CSS asociada, los valores content-box, padding-boxde cómputo a fill-boxy de border-boxy margin-boxde cómputo a stroke-box.
  • Para los elementos con el cuadro de diseño CSS asociado, los valores se fill-boxcalculan ay content-boxpara stroke-boxy view-boxcalculan el valor inicial del mask-clipcual es border-box.

Usando múltiples valores

Esta propiedad puede tomar una lista de valores separados por comas para los clips de máscara y cada valor se aplica a una imagen de capa de máscara correspondiente especificada en la mask-imagepropiedad. En el siguiente ejemplo, el primer valor especifica el área de pintura de máscara de la primera imagen, el segundo valor especifica el área de pintura de máscara de la segunda imagen, y así sucesivamente.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-clip: padding-box, border-box, content-box; )

Manifestación

Soporte de navegador

ES DECIR Borde Firefox Cromo Safari Ópera
No 79+ 53+ Todos 4+ 15+
Android Chrome Android Firefox Navegador de Android Safari de iOS Opera Mobile
Todos Todos Todos Todos 59+
Fuente: caniuse

Más información

Artículo el 6 de noviembre de 2016

Recorte y enmascaramiento en CSS

Mojtaba Seyedi