Cómo utilizar técnicas de enmascaramiento y recorte de CSS y SVG

Los SVG son excelentes para trabajar en la web, y el recorte y el enmascaramiento permiten algunas formas interesantes de mostrar u ocultar partes de sus gráficos web. El uso de estas técnicas también permite una mayor flexibilidad con sus diseños porque no tiene que realizar cambios ni crear nuevas imágenes manualmente; todo se hace con código. Al utilizar una combinación de técnicas de enmascaramiento y recorte de CSS, tendrá muchas opciones para los gráficos de su sitio web.

Para ayudar a aclarar las cosas, el enmascaramiento y el recorte son dos formas diferentes de manipular imágenes con CSS. Comencemos con el recorte.

Conceptos básicos de recorte

Si alguna vez ha utilizado Photoshop, probablemente ya esté familiarizado con las máscaras de recorte. Es un tipo de enfoque similar. Recortar implica colocar una forma vectorial, como un círculo o un triángulo, encima de una imagen o un elemento. Cualquier parte de la imagen detrás de la forma será visible, mientras que todo lo que esté fuera de los límites de la forma estará oculto.

Por ejemplo, si hay una máscara de recorte de triángulo encima de una imagen de un bosque, verá la imagen del bosque dentro de la forma del triángulo. El límite de la forma se denomina ruta de recorte y no debe confundirse con la propiedad clip depreciada. La ruta del clip se crea utilizando la propiedad clip-path .

Nota: no intente esto en su sitio activo

Recuerde: nunca debe cambiar el código directamente en su sitio para asegurarse de que nada se rompa. Nuestra aplicación de desarrollo local gratuita, Local, le ayudará a configurar un entorno de prueba donde podrá seguir este tutorial de forma segura.

Recorte en acción

Los clips son siempre rutas vectoriales. Puede resultar confuso entenderlo, pero todo lo que esté fuera del camino estará oculto, mientras que todo lo que esté dentro del camino será visible. Para comprenderlo mejor y probarlo usted mismo, consulte el ejemplo en CodePen.

Aquí hay un fragmento de la estructura HTML del ejemplo:

 [html]

<svg class="clip-svg">
	<defs>
		<clipPath id="polígono-clip-triángulo-equilátero" clipPathUnits="objectBoundingBox">
			<puntos poligonales="0 0,87, 0,5 0, 0,5 0, 1 0,87" />
		</clipPath>
	</defs>
</svg>

[/html]

Este es el CSS para realizar el recorte:

 [css]

.polygon-clip-triángulo-equilátero {
	-webkit-clip-path: polígono(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	ruta de clip: polígono (0% 87%, 50% 0%, 50% 0%, 100% 87%);
	-webkit-clip-path: url("#polygon-clip-triangle-equilateral");
	ruta-clip: url("#polygon-clip-triangle-equilateral");
}

[/css]

Puede ver dónde se hace referencia a la identificación clipPath en el HTML y cómo utiliza la URL clip-path para realizar el recorte.

Herramienta de recorte

Clippy es una gran herramienta para generar rutas de clips CSS. Existe una amplia variedad de formas y tamaños de entrantes que se pueden personalizar.

Conceptos básicos de enmascaramiento

El enmascaramiento se realiza utilizando una imagen PNG, un degradado CSS o un elemento SVG para ocultar parte de una imagen u otro elemento de la página. Nos centraremos en los gráficos SVG, pero tenga en cuenta que esto se puede hacer con otros tipos o estilos de imágenes.

La propiedad de máscara y el elemento de máscara

Solo un repaso para ayudar a visualizar, es importante tener en cuenta que el elemento enmascarado es la imagen "original" (antes de aplicar la máscara). Es posible que no desee ver la imagen completa, por lo que ocultar partes de ella se realiza con la propiedad mask CSS. La mask es la abreviatura CSS de un grupo de propiedades individuales, en las que profundizaremos en un segundo. El elemento SVG <mask> se utiliza dentro de un gráfico SVG para agregar efectos de enmascaramiento. En este ejemplo, la máscara es un círculo y también se aplica un degradado.

Usando el elemento de máscara SVG en un gráfico SVG

Para tener una idea de la <mask> SVG, la enmascararemos con un gráfico SVG.

Puede parecer un poco complejo a primera vista, pero todo funciona en conjunto para enmascarar la imagen subyacente. Tenemos una imagen real como fondo, entonces, ¿dónde entra en juego el SVG? A diferencia de los ejemplos de recorte, esta imagen de fondo está técnicamente dentro de un elemento SVG. Usaremos CSS para aplicar esta máscara a la imagen. Las propiedades provendrán del elemento de máscara SVG y le daremos la identificación del masked-element en nuestro CSS.

Para ver esto en acción, consulte este ejemplo de Codepen. Aquí está el código de trabajo para el gráfico SVG enmascarado:

 [html]

<svg class="elemento-enmascarado" ancho="300" altura="300" viewBox="0 0 300 300">
	<imagen xlink:href="enlace de imagen" ancho="300px" altura="300px" />
</svg>

[/html] 

Con este CSS, especificamos dónde encontrar la máscara. Buscará el ID de #mask-this:

 [css]
/* Aquí está el CSS para enmascarar */
.imagen de elemento enmascarado {
  máscara: url(#máscara1);
}

[/css] 

¿Notas un degradado en la forma del círculo? Se ha aplicado un degradado, además de establecer la forma del círculo para la máscara.

 [html]

<svg class="svg-mask">
 	<defs>
 		<mask id="máscara1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop stop-color="blanco" offset="0"/>
      <stop stop-color="verde" stop-opacity="0" offset="1"/>
    </linearGradient>
    <circle cx="0.50" cy="0.50" r="0.50" id="círculo" fill="url(#grad)"/>
  	</mask>
 	</defs>
</svg>

[/html]

Enmascaramiento de texto SVG

El enmascaramiento de texto puede hacer cosas muy interesantes, como mostrar una imagen a través de un bloque de texto. La buena noticia es que se puede utilizar un elemento de texto dentro de una máscara SVG. A medida que aumente la compatibilidad con los navegadores en el futuro, esta podría ser una forma realmente interesante de combinar imágenes y tipografía.

Aquí hay una explicación básica de lo que está pasando. Hay un elemento de texto SVG dentro de la máscara SVG. Hemos especificado el valor RGB para el blanco, que crea el área ovalada alrededor del texto enmascarado. Todo lo que esté detrás del área ovalada se ve a través del texto, dando una sensación de recorte.

 [html]

<div class="text-wrap">
    <svg class="text-demo" viewBox="0 0 600 400" ancho="600" altura="400">
    <defs>
      <mask id="miMáscara">
        <rect width="100%" altura="100%" fill="#fff" />
        <text x="50" y="200" id="miTexto">Mi Texto</text>
        <text x="125" y="293" id="miSubtexto">SVG</text>
      </mask>
    </defs>
    <ellipse class="enmascarado" cx="300" cy="200" rx="300" ry="150" fill="rgba(255, 255, 255, 0.8)" />
  </svg>
  </div>

[/html]

 [css]

/* Aquí está el CSS para el elemento de texto */
#mi texto {
tamaño de fuente: 125px;
estilo de fuente: negrita;
llenar: #000;
}

/* Aquí está el CSS para enmascarar */
.enmascarado {
máscara: url("#myMask");
}

[/css]

Para comprenderlo completamente, resulta útil jugar y experimentar con el código. Intente cambiar colores, cambiar texto y ajustar tamaños en este Codepen.

La propiedad de imagen de máscara

Se puede declarar una imagen y la mask-image se puede establecer en un valor de URL. La mask-image puede ser PNG, SVG o una referencia a un elemento mask SVG, como lo demostré en el ejemplo anterior.

Debido a que el enmascaramiento se utiliza para ocultar parcial o totalmente partes de un objeto o elemento, primero querrá un enlace de imagen a un archivo para el elemento que se va a enmascarar. Así es como se ve esa imagen. Es colorido para que sea muy evidente qué parte muestra y oculta la máscara.

 [css]

<img class="máscara-img ejemplo-máscara" src="https://linktoimage.com/img/image-example.jpg" alt="Imagen enmascarada">

[/css] 

Hasta ahora ha habido mucho código SVG, pero este ejemplo es ligeramente diferente ya que habrá una imagen rasterizada enmascarada con un SVG.

 [css]

.máscara de ejemplo {
  imagen-máscara: url(https://linktoimage.com/browser-icon-01.svg);
  imagen-máscara-webkit: url(https://linktoimage.com/browser-icon-01.svg);
  modo de máscara: alfa;
  modo de máscara webkit: alfa;
  repetición de máscara: no repetición;
  webkit-mask-repeat: no-repetir;
  tamaño de máscara: 200px;
  tamaño de máscara-webkit: 200px;
  posición de la máscara: centro;
  posición-máscara-webkit: centro;
}

[/css]

La propiedad mask-image es donde se declarará la forma de la máscara. En este caso, la imagen de la máscara es un gráfico SVG. Tener el enlace URL incluido es cómo se construye la máscara.

Aquí está en Codepen.

Combinando varias imágenes de máscara

Justo cuando pensaba que el enmascaramiento no podía ser mejor, existe la opción de configurar más de una capa de imagen de máscara. Todo lo que necesitas hacer es agregar dos valores de URL (o más si te sientes ambicioso) separados por una coma.

Para ampliar la máscara simple de arriba, se agregará una flecha al gráfico original. Así es como se combinan dos máscaras.

 [css]

.máscara combinada {
   imagen-máscara: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
  imagen-máscara-webkit: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
}

[/css] 

Todo lo que tienes que hacer es sumar los dos valores (con una coma) y ahora hay dos máscaras combinadas, haciendo que las posibilidades de enmascaramiento sean infinitas.

Aquí está en Codepen.

Crea un degradado simple con mask-image

No todas las máscaras tienen que tener una forma compleja. A veces la máscara no es una imagen en particular, sino una máscara simple como un degradado. Si está buscando una manera rápida de lograr esto, la propiedad mask-image es una opción, que es bastante fácil de implementar.

En este ejemplo, se aplicó una clase a un degradado establecido como propiedad mask-image . Con esta sencilla declaración, fue fácil crear una máscara de degradado en la imagen.

 [css]

imagen-máscara: gradiente lineal (negro, blanco, transparente);
-webkit-mask-image: gradiente lineal (negro, blanco, transparente);

[/css] 

Vea esto en Codepen.

La propiedad de repetición de máscara

Una vez que hayas creado una máscara, es bastante fácil hacer más. Esto es realmente útil si buscas hacer un patrón personalizado. La propiedad de repetición de máscara permite la repetición de la máscara. Si alguna vez has creado un fondo en mosaico, este es similar a ese.

Hay algunas cosas importantes a tener en cuenta, como el tamaño y el tipo de repetición de máscara que se debe declarar para crear el patrón perfecto.

El mask-size es bastante fácil de visualizar, especialmente con el valor de píxel establecido aquí.

 [css]

tamaño de máscara: 200px;
tamaño de máscara-webkit: 200px;

[/css] 

Hay algunas opciones más de repetición de máscara si buscas un efecto diferente para el patrón:

• repeat-x se repite a lo largo de la coordenada x.
• Repeat-y repite hacia abajo la coordenada y.
• space se repite y se extiende en el área disponible.
• round se repite varias veces en el área disponible (el escalado ayudará a llenar el espacio si es necesario)

Soporte del navegador

Antes de comprometerse con esta nueva forma de trabajar con gráficos, es importante tener en cuenta que la compatibilidad del navegador no es consistente con el recorte y el enmascaramiento. El recorte es más compatible que el enmascaramiento, pero Internet Explorer no lo admite por completo.

La compatibilidad actual del navegador con máscaras CSS también es bastante limitada, por lo que se sugiere utilizarla como mejora en algunos elementos decorativos. De esa forma, si no es compatible con el navegador del usuario, no afecta la experiencia de visualización del contenido.

Para probar cosas y ver si sus máscaras y recortes son compatibles, le recomendamos crear un JSFiddle o Codepen y luego probarlo en diferentes navegadores. La compatibilidad con los navegadores ha aumentado en los últimos años y, con el tiempo, llegará un punto en el que será totalmente compatible.

No dejes que las limitaciones te depriman: siempre es bueno estar a la vanguardia y una vez que el soporte sea más común, sabrás exactamente cómo revolucionar tus gráficos. En caso de duda, asegúrese de consultar el artículo confiable ¿Puedo utilizar?

Después de experimentar con estos ejemplos, esto debería proporcionar una buena introducción al enmascaramiento y al recorte. Aunque la compatibilidad con el navegador es limitada en este momento, es probable que esto se convierta en una práctica habitual en el futuro.

Siempre es divertido pensar en cómo se pueden utilizar estas técnicas para crear imágenes interesantes. El futuro de los gráficos web nos hará depender menos de los editores de imágenes y permitirá formas más efectivas de crear y modificar imágenes directamente en el navegador.

Cuando quieras que todo el arduo trabajo que has realizado en tus sitios realmente brille, ¡asegúrate de elegir el mejor alojamiento de WordPress posible con WP Engine!