Acerca de las máscaras

Una máscara oculta parte de un elemento que la aloja en función de una forma o unos niveles de transparencia determinados. Los elementos quepueden alojar máscaras son imágenes, elementos div, contenedores de texto o componentes.

Cada elemento solo puede tener una máscara, pero se pueden aplicar varias máscaras encapsulando el elemento en un elemento div y aplicando una máscara al elemento div contenedor. También es posible anidar otro elemento en el elemento donde se aloja la máscara, y añadir otra máscara al elemento secundario.

Tipos de máscaras

Máscara de imagen
Máscara de degradado
Máscara de ruta de clip

Compatibilidad del navegador

Microsoft Edge (versión 40 o anteriores) solo admite las máscaras de ruta de clip rectangulares. Se ignorará cualquier otro tipo y forma de máscara.

Máscara de imagen

Las máscaras de imagen usan las áreas transparentes de una imagen para ocultar el elemento donde se alojan.

Para añadir una máscara de imagen, siga estos pasos:

Haga clic con el botón derecho en el elemento que quiera ocultar.
Seleccione Añadir máscara de imagen en el menú emergente.
Importe o seleccione la imagen que quiera utilizar como máscara.

Puede ajustar el tamaño y la posición de la máscara con la herramienta Selección o el panel Propiedades.

Nota: Las máscaras de imagen no pueden usar posiciones determinadas mediante porcentajes.

Máscara de degradado

Las máscaras de degradado ocultan el elemento que las aloja conforme a un degradado de niveles de transparencia.

Google Web Designer admite los siguientes tipos de degradado para las máscaras:

Degradado lineal
Degradado radial

Para añadir una máscara de degradado, siga estos pasos:

Haga clic con el botón derecho en el elemento que quiera ocultar.
Seleccione Añadir máscara de degradado en el menú emergente.
Haga clic en la muestra de degradado del panel Propiedades para personalizar el tipo de degradado, los colores, la opacidad y el ángulo (solo para degradados lineales).

De forma predeterminada, la máscara de degradado tiene el mismo tamaño que el elemento donde se aloja, pero con la herramienta Selección o el panel Propiedades se pueden ajustar sus propiedades de posición y tamaño.

Nota: Las máscaras de degradado no pueden usar posiciones determinadas mediante porcentajes.

Máscara de ruta de clip

Las máscaras de ruta de clip utilizan una forma geométrica para definir la parte del elemento que se debe mostrar.

Para seleccionar la forma de la máscara, haga clic y mantenga pulsada la herramienta de máscara de ruta de clip situada en la barra de herramientas hasta que aparezca un menú emergente:

Máscara Rectángulo (predeterminada)
Máscara Óvalo
Máscara Polígono

Compatibilidad del navegador

Internet Explorer y Microsoft Edge solo admiten las máscaras de rutas de clips en formas rectangulares, con la posición y el tamaño indicados en píxeles. Se ignorarán las máscaras determinadas mediante porcentajes y cualquier otra forma de máscara, incluidas las máscaras Rectángulo con esquinas redondeadas.
Es posible que Firefox y Safari no rendericen correctamente las máscaras Rectángulo con esquinas redondeadas que tengan valores altos de radio de esquina (en comparación con las dimensiones de la máscara).
Safari no admite máscaras de rutas de clips en formas dibujadas con la herramienta Rectángulo. Como solución alternativa, utilice un elemento div en lugar de una forma rectangular y coloque la máscara en el elemento div.
En Chrome y Opera, las máscaras de rutas de clips se renderizan de forma incorrecta cuando el elemento de alojamiento contiene un elemento secundario transformado en 3D.
Las máscaras Rectángulo con esquinas redondeadas definidas mediante un radio basado en porcentajes pueden renderizarse de forma ligeramente diferente en cada navegador.

Para añadir una máscara de ruta de clip, siga estos pasos:

Seleccione el elemento que quiera ocultar.
Seleccione la herramienta de máscara para elegir la forma deseada.
Configure opciones adicionales para la forma de la máscara.
- Solo para máscaras Rectángulo: defina el radio de las esquinas redondeadas en la barra de opciones de herramientas, situada en la parte superior. Utilice el botón Mantener igual para utilizar el mismo radio en las cuatro esquinas.
- Solo para máscaras Polígono: seleccione la forma que quiera en la barra de opciones de herramientas, situada en la parte superior. Utilice la opción Forma libre para dibujar la forma que desee. Si selecciona la opción Polígono regular, introduzca el número de lados que quiere que tenga el polígono.
Dibuje la máscara sobre el elemento.
- Mantenga pulsada la tecla Mayús mientras dibuja para que la máscara conserve la misma anchura y altura. La tecla Mayús no afecta a las máscaras Forma libre ni a algunas formas predefinidas que siempre se dibujarán con lados de igual longitud: Triángulo, Rombo, Pentágono, Hexágono y Estrella.
- Mantenga pulsada la tecla Alt para utilizar la posición de dibujo inicial como punto central de la máscara.

Nota: Después de dibujar una máscara Polígono, puede arrastrar los puntos de dirección para cambiar la forma de la máscara, pero no puede cambiar el número de lados.

Formas de máscaras Polígono

	Forma libre (dibuje la forma que desee)
	Polígono regular (defina el número de lados; todos se dibujan con la misma longitud)
	Triángulo
	Rectángulo
	Marco
	Rombo
	Pentágono
	Hexágono
	Comilla angular derecha
	Comilla angular izquierda
	Cruzado
	Estrella
	Flecha hacia la derecha
	Flecha hacia la izquierda

Seleccionar máscaras

En la escena: seleccione el elemento y, a continuación, haga clic en la máscara que contiene. La máscara se marcará en verde.
En la línea de tiempo del modo avanzado: seleccione la capa de máscara situada debajo de la capa del elemento. Las capas de máscara se indican mediante el símbolo delante del nombre de la capa.

Se pueden ocultar y bloquear capas de máscara en la línea de tiempo del modo avanzado para trabajar más fácilmente con los elementos que contengan máscaras.

Selección de varias máscaras

Si quiere eliminar varias capas de máscara a la vez, mantenga pulsada la tecla Ctrl y selecciónelas haciendo clic en ellas en la línea de tiempo del modo avanzado. No se puede editar más de una máscara a la vez.

Solo se puede eliminar una combinación de elementos y máscaras si los elementos que contienen las máscaras se incluyen en la selección.

Editar máscaras

Las máscaras se pueden editar directamente en la escena o mediante el panel Propiedades. Las propiedades CSS de las máscaras no están disponibles en el panel CSS.

Las máscaras se pueden editar de las siguientes formas:

Cortar, copiar y pegar una máscara
Mover una máscara
Cambiar el tamaño de una máscara
Girar una máscara
Cambiar la fuente de una máscara de imagen
Cambiar el degradado de una máscara de degradado
Cambiar el grado de curvatura de las esquinas de una máscara Rectángulo
Cambiar la forma de una máscara Polígono

Cortar, copiar y pegar una máscara

Puede cortar o copiar y pegar una máscara en otro elemento, o incluso en otro documento, mediante cualquiera de los siguientes métodos:

En la escena o en la línea de tiempo del modo avanzado:
- Haga clic con el botón derecho en la máscara y seleccione Cortar o Copiar.
- Haga clic con el botón derecho en el elemento al que quiera aplicar la máscara y seleccione Pegar o Sustituir máscara.
En la línea de tiempo del modo avanzado:
- Arrastre la capa de máscara a una capa de elemento para mover la máscara a un elemento diferente (no disponible para sustituir una máscara).
- Mantenga pulsada la tecla Alt mientras arrastra una capa de máscara para copiar la máscara en otro elemento (no disponible para sustituir una máscara).
Combinaciones de teclas:
- Cortar: Ctrl + X (Windows) o ⌘ + X (Mac)
- Copiar: Ctrl + C (Windows) o ⌘ + C (Mac)
- Pegar: Ctrl + V (Windows) o ⌘ + V (Mac)
Comandos de menú:
- Editar > Cortar
- Editar > Copiar
- Editar > Pegar o Sustituir máscara

También se pegarán las animaciones de máscara.

Limitaciones al copiar y pegar máscaras

Solo puede seleccionar una sola máscara para cortarla o copiarla y un solo elemento en el que pegarla.
Al pegar una máscara en un elemento que ya tiene una máscara, se sustituirá la máscara que tenga.
Las máscaras no se pueden cortar, copiar ni pegar en reglas de medios.

Mover una máscara

Seleccione la máscara que quiera mover y, a continuación, utilice uno de los siguientes métodos:

Edite las propiedades de posición superior e izquierda en el panel Propiedades. Estos valores hacen referencia a la esquina superior izquierda del elemento donde se aloja la máscara.
Utilice las teclas de flecha para mover la máscara en intervalos de un píxel. Mantenga pulsada la tecla Mayús a la vez que pulsa una tecla de flecha para mover la máscara 10 píxeles.
Utilice la herramienta Selección para arrastrar la máscara a una nueva posición con el ratón. Mantenga pulsada la tecla Mayús mientras arrastra la máscara para moverla solo a lo largo de un único eje.

Las máscaras se pueden colocar fuera de los límites del elemento donde se alojan.

Nota: Las máscaras de imagen y las máscaras de degradado no pueden usar posiciones determinadas mediante porcentajes.

Cambiar el tamaño de una máscara

Seleccione la máscara cuyo tamaño quiera modificar y, a continuación, utilice uno de los siguientes métodos:

Edite las propiedades de anchura y altura en el panel Propiedades.
Utilice la herramienta Selección con la opción Control de transformación habilitada en la barra de opciones de herramientas, situada en la parte superior.
- Mantenga pulsada la tecla Mayús mientras arrastra el cursor para mantener la relación de aspecto.
- Mantenga pulsada la tecla Alt (en Windows) u Opción (en un Mac) mientras arrastra el cursor para cambiar el tamaño de la máscara sin cambiar el punto central.

Girar una máscara

Las máscaras no se pueden girar directamente, pero se puede lograr el mismo efecto siguiendo estos pasos antes de añadir la máscara:

Encapsule el elemento sobre el que quiera aplicar la máscara.
Añada la máscara al elemento div del contenedor.
Gire el elemento div contenedor (la máscara también girará).
Gire el elemento original en la dirección opuesta.

Cambiar la fuente de una máscara de imagen

Para cambiar la imagen de una máscara de imagen, siga estos pasos:

Seleccione la máscara.
En el panel Propiedades, haga clic en el botón Definir máscara de imagen del campo Ruta.
Seleccione una imagen de la biblioteca o haga clic en el botón Importar recursos para utilizar otra imagen.
Haga clic en Aceptar.

Cambiar el degradado de una máscara de degradado

Puede personalizar el degradado utilizado en una máscara de este tipo.

Seleccione la máscara.
En el panel Propiedades, haga clic en la muestra de degradado.
Edite el degradado:
- Tipo de degradado: seleccione el botón Degradado lineal o Degradado radial .
- Distancia de transición: arrastre un marcador de transparencia por la parte superior de la barra de degradado para cambiar la distancia de transición.
- Transparencia: los marcadores de transparencia establecen el nivel de opacidad en un punto concreto a lo largo del degradado. Un 100 % indica que el elemento de alojamiento está totalmente visible, mientras que un 0 % indica que está totalmente oculto. Haga clic en un marcador de transparencia para editar su nivel de opacidad en el campo de porcentaje situado a la derecha.
- Marcadores de transparencia adicionales: para añadir más marcadores de transparencia, haga clic en la barra de degradado. Para eliminar un marcador de transparencia, arrástrelo hacia abajo.
- Ángulo: puede ajustar el ángulo de los degradados lineales.
- Predeterminado: haga clic en el botón Degradado predeterminado para restablecer el degradado a la configuración predeterminada (un degradado lineal del 0 % al 100 % a 90 grados).

Cambiar el grado de curvatura de las esquinas de una máscara Rectángulo

Puede cambiar las esquinas de una máscara Rectángulo para que sean cuadradas o redondeadas, y ajustar el radio de curvatura de las esquinas redondeadas.

Seleccione la máscara.
En el panel Propiedades, defina el radio de la esquina en píxeles o como un porcentaje. Al definir el radio en 0, la esquina se vuelve cuadrada.
Si el botón Mantener igual está activo, se aplica el mismo valor a las cuatro esquinas. Desactive el botón para configurar cada esquina de forma individual.

Cambiar la forma de una máscara Polígono

Puede ajustar la forma de una máscara Polígono en la escena de la siguiente forma:

Seleccione la máscara.
Seleccione la herramienta máscara Polígono en la barra de herramientas. En cada vértice aparecen puntos de dirección.
Arrástrelos hasta donde desee.
- Mantenga pulsada la tecla Mayús mientras arrastra el punto de dirección para moverlo a lo largo de un único eje (vertical u horizontal).

Nota: No puede cambiar el número de lados de una máscara Polígono que ya tenga creada.

Animar máscaras

Puede animar el tamaño y la posición de una máscara. También puede utilizar rangos de visibilidad para controlar cuándo aparece o desaparece una máscara. La animación de máscara es independiente de cualquier animación del elemento de alojamiento.

En el caso de las máscaras Rectángulo, puede animar las esquinas redondeadas. También se puede animar la forma de las máscaras de rutas de clips de polígonos (no así el número de lados) cambiando la posición de los puntos de dirección en un fotograma clave.

Las máscaras no se pueden editar en varios fotogramas. Seleccione los fotogramas clave uno por uno para editar la animación de la máscara.

Nota: Al animar máscaras de imagen a velocidades más lentas, es posible que se produzca un efecto de fluctuación dado que los valores de píxeles fraccionarios entre fotogramas se redondean.

Compatibilidad del navegador

La animación de máscara de ruta de clip no se podrá reproducir en Safari si el documento contiene elementos <canvas>, como en los componentes Galería de transiciones, Efecto de imagen o Efectos de partículas.

Máscaras en diseños adaptables

Las reglas de medios le permiten anular las propiedades y la animación de la máscara en intervalos de tamaños de viewport específicos. En el caso de las máscaras de imagen, también puede cambiar la fuente para utilizar otra imagen. En cuanto a las máscaras de degradado, puede cambiar el degradado.

Nota: Al eliminar la anulación de una propiedad de posición o tamaño, se restablecen automáticamente las propiedades de posición (superior e izquierda) o las de tamaño (anchura y altura). En el caso de las máscaras de ruta de clip, se restablecerán todas las propiedades de posición y tamaño.

¿Te ha resultado útil esta información?

¿Cómo podemos mejorar esta página?