El uso de recorte en CSS puede ayudarnos a alejarnos de todo en nuestros diseños como una caja. Puedes crear una ruta de clip si usas varias formas básicas o un SVG. Luego, corta las partes de un elemento que no quieras mostrar.
Los elementos de las páginas web se definen dentro de un cuadro rectangular.
Sin embargo, eso no significa que debamos hacer que todo parezca una caja.
Puedes usar la propiedad clip-path de CSS para recortar partes de una imagen o de otro elemento y crear efectos interesantes.
En el ejemplo anterior, la imagen del globo es cuadrada (fuente).
Con clip-path y el valor de forma básico de circle(), el cielo adicional alrededor del globo se recorta y deja una imagen circular en la página.
Como la imagen es un vínculo, puedes ver algo más sobre la propiedad clip-path.
Solo se puede hacer clic en el área visible de la imagen, ya que los eventos no se activan en las partes ocultas de la imagen.
El recorte se puede aplicar a cualquier elemento HTML, no solo a las imágenes.
Existen varias formas diferentes de crear un clip-path. En esta publicación, las analizaremos.
Compatibilidad del navegador
En el caso de los navegadores heredados, un resguardo puede ser permitir que el navegador ignore la propiedad clip-path y muestre la imagen sin recortar.
Si este es un problema, puedes probar clip-path en una consulta de funciones y ofrecer un diseño alternativo para navegadores que no sean compatibles.
@supports(clip-path: circle(45%)) {
/* code that requires clip-path here. */
}
Formas básicas
La propiedad clip-path puede tener varios valores.
El valor que se usó en el ejemplo inicial fue circle().
Este es uno de los valores de forma básicos que se definen en la especificación de formas de CSS.
Eso significa que puedes recortar un área y, además, usar el mismo valor para shape-outside para hacer que el texto se ajuste a esa forma.
La lista completa de formas básicas es la siguiente:
inset()
El valor inset() inserta el área recortada desde el borde del elemento y se le pueden pasar valores para los bordes superior, derecho, inferior e izquierdo.
También se puede agregar un elemento border-radius para curvar las esquinas del área recortada mediante la palabra clave round.
En mi ejemplo, tengo dos cuadros, ambos con una clase de .box.
El primer cuadro no tiene recorte, el segundo se recorta con valores inset().
circle()
Como viste, el valor circle() crea un área recortada circular.
El primer valor es una longitud o un porcentaje y es el radio del círculo.
Un segundo valor opcional te permite establecer el centro del círculo.
En el siguiente ejemplo, utilizo valores de palabras clave para establecer el círculo recortado en la parte superior derecha.
También puedes usar duraciones o porcentajes.
Ten cuidado con los bordes planos.
Ten en cuenta que, con todos estos valores, la forma quedará recortada por el cuadro de margen del elemento. Si creas un círculo en una imagen y esa forma se extenderá fuera del tamaño natural de la imagen, obtendrás un borde plano.
circle(50%) a la imagen que se usó antes. Como la imagen no es cuadrada, presionamos el cuadro de margen en la parte inferior y superior y el círculo queda recortado.ellipse()
En esencia, una elipse es un círculo aplastado y, por lo tanto, actúa de manera muy similar a circle(), pero acepta un radio para "x" y un radio para "y", más el valor para el centro de la elipse.
polygon()
El valor polygon() puede ayudarte a crear formas bastante complejas, lo que define tantos puntos como necesites, estableciendo las coordenadas de cada punto.
Para ayudarte a crear polígonos y ver lo que es posible, consulta Clippy, un generador de clip-path, y, luego, copia y pega el código en tu propio proyecto.
Formas a partir de valores de cuadros
En las formas CSS, también se definen las formas de valores de cuadro.
Estos se relacionan con el modelo de cuadros de CSS: el cuadro de contenido, el cuadro de relleno, el cuadro de borde y el cuadro de margen con valores de palabra clave de content-box, border-box, padding-box y margin-box.
Estos valores se pueden usar solos o junto con una forma básica para definir el cuadro de referencia que usa la forma. Por ejemplo, el siguiente fragmento recortaría la forma al borde del contenido.
.box {
clip-path: content-box;
}
En este ejemplo, el círculo usará content-box como cuadro de referencia en lugar de margin-box (que es el valor predeterminado).
.box {
clip-path: circle(45%) content-box;
}
Actualmente, los navegadores no admiten el uso de valores de cuadro para la propiedad clip-path.
Sin embargo, son compatibles con shape-outside.
Uso de un elemento SVG
Para tener más control sobre el área recortada del que es posible con las formas básicas, usa un elemento SVG clipPath.
Luego, haz referencia a ese ID y usa url() como el valor de clip-path.
Cómo animar el área recortada
Las transiciones y animaciones de CSS se pueden aplicar a clip-path para crear algunos efectos interesantes.
En el siguiente ejemplo, voy a animar un círculo cuando se coloca el cursor sobre un círculo mediante la transición entre dos círculos con un valor de radio diferente.
Hay muchas formas creativas en las que la animación se puede usar con el recorte. En Cómo animar con ruta de recorte en los trucos de CSS, se muestran algunas ideas.
Foto de Matthew Henry en Burst.