CSS Shapes, clipping y masking – y cómo usarlos

21 noviembre, 2017 1:34 por

Esta es una traducción del artículo original publicado en el blog de Mozilla Hacks.

El lanzamiento de Firefox 54 introdujo nuevas características dentro de una propiedad ya genial de CSS: clip-path.

clip-path es una propiedad que nos permite recortar partes de un elemento. Hasta ahora, en Firefox solo podías utilizar un SVG para cortar un elemento. Pero con Firefox 54, también podrás utilizar CSS shapes: ¡Recuadros, círculos, elipses y polígonos!

Nota: esta publicación contiene muchas demostraciones que requieren soporte para clip-path y mask. Para poder ver e interactuar con cada demostración en esta publicación, vas a necesitar Firefox 54 o superior.

Uso básico

Es importante tener en cuenta que clipPath no acepta “imágenes” como entrada pero como elementos <clipPath>:

Algo genial es que estos elementos <clipPath> pueden contener animaciones SVG:

Sin embargo, con Firefox también tendremos funciones CSS shape a nuestra disposición. Éstas nos permiten definir shapes dentro de nuestras hojas de estilo, así no hay necesidad de un SVG. Las funciones shape que tenemos a nuestra disposición son: circle, ellipse, inset y polygon. Aquí los puedes ver en acción:

Y no sólo eso, también podemos animarlos con CSS. Las únicas restricciones son de que no podemos “mezclar” las funciones shapes (por ejemplo, mutar de un circle a un inset) y con polígonos animados, los polígonos deben preservar el mismo número de vértices durante toda la animación.

Aquí hay una animación simple utilizando un shape de circle:

Y aquí hay otra animación que utiliza polygon. Nota: aunque estemos limitados a preservar nuestro número de vértices, los podemos “mezclar” repitiendo los valores. Esto crea la ilusión de animar al polígono con cualquier número de lados.

Nota que el clip-path también abre nuevas posibilidades de diseño. La siguiente demostración utiliza clippping para hacer una imagen más interesante en un artículo de varias columnas:

Animando cosas con JavaScript

Clipping abre buenas posibilidades. En el siguiente ejemplo, clip-path ha sido utilizado para aislar elementos de un sitio. En este caso, simulando un tour/tutorial:

Se hace con JavaScript obteniendo las dimensiones de un elemento durante el proceso, y calculando la distancia respecto a un contenedor de referencia, y luego utilizando esa distancia para actualizar la forma de recuadro utilizada en la propiedad clip-path.

Ahora también podemos cambiar dinámicamente el clipping de acuerdo a la entrada del usuario, como en este ejemplo que incluye un efecto “periscopio” controlado por el mouse:

¿clip-path o mask?

Existe una propiedad CSS similar, mask, pero no es idéntica a clip-path. Dependiendo de tu caso de uso específico, deberías elegir una u otra. También nota que el soporte varía entre los navegadores, y actualmente Firefox es el único navegador que soporta completamente todas las características de mask, así que vas a necesitar ejecutar Firefox 54 para interactuar con las demostraciones de abajo en Codepen.

Masking puede utilizar una imagen o un elemento <mask> en un SVG. Por otro lado, clip-path utiliza un path SVG o un shape CSS.

Masking modifica la apariencia del elemento que oculta. Por ejemplo, aquí hay un mask circular llenado con un gradiente lineal:

Uso de mask

Y recuerda que también puedes utilizar imágenes bitmap aún si no tienen un canal alfa (transparencia), mediante la modificación del mask-mode:

Aplicación de bitmap con mask

El concepto clave de masking es que modifica los píxeles de una imagen, cambiando sus valores  hasta el punto de hacer de algunos de ellos completamente transparentes.

Por otro lado, clipping “corta” el elemento, y esto incluye su superficie de colisión. Mira la siguiente demostración que muestra dos imágenes idénticas con mask y clip con la misma forma de cruz. Intenta posar el cursor sobre las imágenes y ve lo que pasa. Notarás que en la imagen con mask el área de colisión también contiene partes con mask. En la imagen clipped, la única parte visible es el área de colisión (la forma de cruz) del elemento.

Mask vs clip

¿Entonces masking es mejor que clipping, o viceversa? No, solo son utilizadas para diferentes cosas.

Espero que esta publicación haya despertado tu curiosidad sobre clip-path. ¡Utiliza Firefox para probarla!

The following two tabs change content below.

Carlos Chocobar

Compartir artículo:

Start the discussion at foro.mozilla-hispano.org

  • ¡Participa!

    Firefox Friends »
    Agrega botones de Firefox en tu sitio web y comparte tu amor por Mozilla Firefox.
    Armada alucinante »
    Ayuda a otros usuarios en Twitter.
    Colabora con la comunidad »
    En Mozilla lo importante son las personas. Descubre cómo puedes colaborar.

    Boletín Firefox

    Suscríbete al boletín de novedades de Firefox.

  • Descargas

    Descarga los programas de Mozilla.

    Lo más visto

    cc-by-sa