Posición de la máscara - Trucos CSS

Anonim

En CSS, la mask-positionpropiedad especifica la posición inicial de una imagen de capa de máscara en relación con el área de posición de máscara. Funciona como la background-positionpropiedad.

.element ( mask-image: url("star.svg"); mask-position: 20px center; )

El enmascaramiento le permite mostrar partes seleccionadas de un elemento mientras oculta el resto. En la siguiente demostración, puede cambiar la posición de la imagen de la capa de máscara:

Sintaxis

mask-position: = ( ( left | center | right ) || ( top | center | bottom ) | ( left | center | right | ) ( top | center | bottom | )? | ( ( left | right ) ) && ( ( top | bottom ) ) )
  • Valor inicial: 0% 0%
  • Se aplica a: todos los elementos. En SVG, se aplica a los elementos contenedores excluyendo el elemento, todos los elementos gráficos y el elemento.
  • Heredado: no
  • Valor calculado: consiste en: dos palabras clave que representan el origen y dos compensaciones desde ese origen, cada una dada como una longitud absoluta (si se le da a ), de lo contrario como un porcentaje.
  • Tipo de animación: lista repetible

Valores

A puede ser especificada en términos de palabras clave de desplazamiento ( top, left, bottom, right, y center), porcentajes y valores de longitud con respecto a los bordes del elemento, similar a la CSS background-positionpropiedad.

/* Offset keywords */ mask-position: top; mask-position: right; mask-position: bottom; mask-position: left; mask-position: center; 
 /* Length values */ mask-position: 100px 200px; mask-position: 5rem 20%; mask-position: 0 10vh; 
 /* Percentage values */ mask-position: 25% 50%; 
 /* Global values */ mask-position: intial; mask-position: inherit; mask-position: unset;

Definiciones de valor

  • : Cualquier longitud CSS válido (como px, em, remy %, entre otros) que se especifica en qué medida el borde de la imagen máscara es desde el borde correspondiente del elemento.
  • : Especifica la posición de la imagen de la capa de máscara como un valor de porcentaje relativo al área de posición de la máscara menos el tamaño de la imagen de la máscara.
  • top: Equivalente al 0% para la posición vertical.
  • right: Equivalente al 100% para la posición horizontal.
  • bottom: Equivalente al 100% para la posición vertical.
  • left: Equivalente al 0% para la posición horizontal.
  • center: Equivalente al 50% para la posición horizontal si no se especifica la posición horizontal, o al 50% para la posición vertical, si lo está.
  • initial: Aplica la configuración predeterminada de la propiedad, que es 0% 0%.
  • inherit: Adopta el mask-positionvalor del padre.
  • unset: Elimina la corriente mask-positiondel elemento.

Usando múltiples valores

Esta propiedad puede tomar una lista de valores separados por comas para las posiciones de la 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 la posición de la primera imagen, el segundo valor especifica la posición de la segunda imagen, y así sucesivamente.

.element ( mask-image: url("image-1.png.webp"), url("image-2.png.webp"), url("image-3.png.webp"); mask-position: 100px 10%, 0 right, center; )

Sintaxis diferente

mask-position puede tomar uno, dos, tres o cuatro valores para especificar la posición de la capa de máscara horizontal y verticalmente.

Valor único

En caso de que se establezca un valor único , se toma como valor horizontal y se supone que es el valor vertical center.

mask-position: 100px; /* 100px center */
Dos valores

En caso de utilizar pares de valores, el primero se toma como valor horizontal y el segundo especifica la posición de la capa de creación verticalmente.

mask-position: 10% 50%; /* x=10%, Y=50% */

Si ambos valores son palabras clave, el orden de las palabras clave es irrelevante:

mask-position: top left; /* = left top */

Pero cuando tenemos una combinación de palabra clave y longitud o porcentaje, el orden importa y el primer valor siempre corresponde al desplazamiento horizontal. Por lo tanto:

mask-position: 50% right; /* = horizontal center, vertical right */ mask-position: right 50%; /* = horizontal right, vertical center */
Tres valores

Si se dan tres valores, se supone que el desplazamiento faltante es cero:

mask-position: left 100px bottom; /* left=100px bottom=0 */
Cuatro valores

Una sintaxis de cuatro valores le permite especificar a qué lados del elemento está colocando la máscara en relación (valores 1 y 3), y luego la distancia de esos lados (valores 2 y 4).

Entonces, si desea colocar la máscara 100px desde la parte inferior del elemento y 200px desde la derecha, puede hacer lo siguiente:

mask-position: bottom 100px right 200px;

Animando máscaras

Es posible animar la posición de la máscara y mask-sizeusar la animación de fotogramas clave y la transición de CSS, como se muestra a continuación:

.element ( mask-image: url("mask.png.webp"); mask-position: 10px 10px; transition: mask-position 1s ease-in-out; ) 
 .element:hover ( mask-position: right 10px bottom 10px; )

En esta próxima demostración, estamos animando la posición de la capa de máscara usando la animación de fotogramas clave:

Manifestación

Cambie el valor de mask-positionen la siguiente demostración:

Soporte de navegador

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

Más información

  • Módulo de enmascaramiento CSS Nivel 1 (Borrador del editor)
  • Recorte y enmascaramiento en CSS
  • Recorte frente a enmascaramiento: cuándo usar cada uno
  • # 185: Jugando con máscaras CSS (video)