Recortar imágenes con formas en páginas web: máscaras de recorte con CSS y SVG

Utilizar máscaras de recorte en diseño gráfico es una práctica habitual que dinamiza el uso de imágenes en la composición. Hasta hace muy poco, para hacerlo en diseño web, se necesitaba preparar la imagen en un programa como Photoshop previamente y exportarla como mapa de bits en PNG24.

La propiedad CSS clip-path nos va a permitir hacer máscaras de recorte en nuestros diseños web.

Con la introducción del formato vectorial SVG se abrieron nuevas posibilidades, ya que éste permite trabajar con formas sencillas, polígonos o trazos complejos directamente generados en código. Es decir, por fin se podía dejar de usar el mapa de bits para iconos e ilustraciones.

Por ejemplo, en SVG un círculo se escribe con su propia etiqueta y una serie de atributos para darle posición, dimensión y relleno:

<circle cx="50%" cy="50%" r="100" fill="gold" />

En definitiva, el empleo de formas vectoriales en nuestros diseños webs gracias al SVG va a permitir reducir los tiempos de carga; además, estos archivos tienen siempre la máxima resolución y dan mucha flexibilidad para cualquier modificación, que se hace directamente en el código.

Junto a estas ventajas, tendremos una serie de técnicas asociadas a su uso que abren otras opciones de composición en web, como el recorte de imágenes con la propiedad CSS clip-path.

clip-path: máscaras de recorte en web

Poder enmascarar una imagen en nuestro HTML es posible gracias a la combinación de formas SVG y la propiedad CSS clip-path.

img {
 clip-path: circle(200px at 50% 50%);
}

En el ejemplo de arriba se ha usado <circle> a través de la propiedad CSS clip-path. Esta forma, gracias a la propiedad de border-radius, ya la teníamos entre nuestras opciones más habituales para usarlas con imágenes; pero si utilizamos una forma más compleja, como por ejemplo un hexágono, el proceso del clip-path sigue siendo igual de sencillo y nos permite conseguir unos resultados mucho más innovadores.

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

Aunque estas formas vectoriales, con valores y cifras en código, podríamos obtenerlas utilizando cualquier programa vectorial que guarde en formato SVG, la herramienta online Clippy nos puede ayudar a ahorrar mucho tiempo en este proceso.

Se pueden hacer máscaras de recorte en SVG utilizando formas poligonales.
Clippy es una herramienta creada por Bennett Feely.

Los beneficios de usar imágenes recortadas con formas poligonales no está sólo en la variedad, sino también en el hecho de que al usar código podemos añadir animación, siendo una de las únicas formas de conseguir motion con vectores sin incrustar un vídeo hecho previamente.

Otra opción más compleja sería recortar una imagen con una forma más elaborada, es decir, una que no la podamos enmarcar en un polígono. Eso sí, hemos de tener en cuenta que esta opción tiene todavía algunas limitaciones en diversos navegadores, sobre todo en lo que respecta a cómo introducir dicha forma.

No obstante las dificultades indicadas, os ponemos un ejemplo: a continuación, vamos a recortar la imagen de Roald Amundsen, el explorador noruego que alcanzó por primera vez el Polo Sur, con una mapa trazado de forma sencilla de la Antártida.

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
    <clipPath id="trazado">
      <path d="M411,341.046l10.285-7.911,17.405,55.38,60.126,14.241,37.975,64.873,50.633-13.449L607.2,398.008l-24.525-5.538L619.07,290.414l95.728-4.747,148.734,55.38L877.772,407.5l-35.6,17.4L892.8,447.85,911,530.92,892.8,577.6l4.747,18.2-19.778,12.658L838.215,684.4,720.335,697.85l-29.272-28.481,8.7-78.323-71.2-52.215L607.2,612.407H546.285l-47.468-56.171V530.92h-20.57l4.747-106.013-56.171-26.9Z" transform="translate(-400 -260)" />
    </clipPath>
  </svg>
<img src="https://www.enfoquegaussiano.com/wp-content/themes/nuevoenfoque/img/amundsen-cuadrada.jpg" style="clip-path: url(#trazado);">

Para poder usar un trazado complejo, éste debe estar presente tanto en el HTML como en un SVG en línea, con todo su código y con una id, que será a la que llamemos a través de url.

Acercando el diseño tradicional

Desde sus orígenes, el diseño web ha tenido un auténtico lastre en las limitaciones técnicas del propio medio. En los últimos cinco años se han incorporado una gran cantidad de nuevas propiedades CSS que han acercado el diseño gráfico tradicional al de interfaces web.

Esto ha facilitado que los profesionales de este ámbito puedan plasmar sus conocimientos en la web sin renunciar al rendimiento de la página, y además, añadiendo toda una serie de posibilidades de animación e interacción del usuario.

1 comentario en “Recortar imágenes con formas en páginas web: máscaras de recorte con CSS y SVG”

Dinos lo que piensas

Tu email no se mostrará ;)