Utilizar la propiedad clip-path de CSS es una manera sencilla de dotar de dinamismo a los diseños. Hace años nuestras posibilidades al trabajar con imágenes se limitaban a poner redondear los bordes. Clip-path nos permite utilizar infinidad de formas como máscara para las imágenes o para cualquier elemento HTML.
Definir la forma
La sintaxis es muy sencilla, clip-path permite los siguientes valores:
- inset(top right bottom left): Forma un rectángulo interno circle(size at x y):
- circle(size at x y): Forma un círculo que se puede posicionar utilizando coordenadas x e y
- ellipse(size-x size-y at x y): Similar al anterior, pero formando una elipse.
- polygon(x y, x y, n...): Dibuja un polígono con tantos lados como se le indique por cada par x e y
- path(coordenadas): Dibuja la forma indicada por un SVG.
Unos cuantos ejemplos
Para obtener un simple círculo:
.clip-path: circle(200px)
O un círculo deplazado: clip-path:
circle(200px at 100px 50%)
Un polígono sencillo de 4 lados:
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
Un polígono custom de 6 lados:
polygon(25% 0%, 70% 17%, 100% 50%, 75% 100%, 29% 85%, 0% 50%)
Una forma compleja a partir de un SVG:
path('M370.5,329Q343,418,248,404.5Q153,391,88,315.5Q23,240,90,167.5Q157,95,236,102.5Q315,110,356.5,175Q398,240,370.5,329Z')
Animaciones
No tenemos que limitarnos a una forma estática, ya que podemos crear animaciones utilizando keyframes, incluso podemos hacerlo combinando varios svg. por ejemplo:
.clip{
clip-path: path('M370.5,329Q343,418,248,404.5Q153,391,88,315.5Q23,240,90,167.5Q157,95,236,102.5Q315,110,356.5,175Q398,240,370.5,329Z') tra;
animation: animation-clip 3s infinite;
transform: translate(100 100)
}
@keyframes animation-clip{
0% { clip-path: path('M370.5,329Q343,418,248,404.5Q153,391,88,315.5Q23,240,90,167.5Q157,95,236,102.5Q315,110,356.5,175Q398,240,370.5,329Z'); }
50% { clip-path: path('M384,298Q307,356,238,360Q169,364,90,302Q11,240,80.5,162.5Q150,85,253,62Q356,39,408.5,139.5Q461,240,384,298Z'); }
100% { clip-path: path('M370.5,329Q343,418,248,404.5Q153,391,88,315.5Q23,240,90,167.5Q157,95,236,102.5Q315,110,356.5,175Q398,240,370.5,329Z'); }
}
