Propiedad Css Clip-path y cómo animarla. Adiós a los ángulos a 90º y cajas rectangulares en la web 1.6.15
La propiedad css clip-path libertadora de la tiranía de los ángulos rectos y elementos rectangulares en la web. Descripción, formas de uso y cómo animarla. Ejemplos y demos incluidos.
Propiedad Css Clip-path y cómo animarla. Adiós a los ángulos a 90º y cajas rectangulares en la web
La web y más concretamente la presentación visual del documento Html, encomienda de Css, ha sido víctima de 2 tiranos:
- El orden de aparición en el html.
- Las esquinas rectas.
Esto es, lo que primero aparece en el código fuente antes se dibuja en pantalla y todo son cajas rectangulares: todo tiene cuatro esquinas y cada esquina en un ángulo de 90 grados.
Inicialmente lo primero se podía evitar sacando al elemento del flujo del documento (position, float...) con efectos inherentes a ello que había que "compensar.
La liberación real y definitiva de ese tirano fue obra y gracia del flexbox. Concretamente de las propiedades flex-flow y order.
Pero la certeza de que todo está cuadriculado seguía ahí. Porque border-radius sólo "enmascara" visualmente el trozito de elememento. Aunque se presente redondo a la vista el resto sigue ahí para otros elementos y para los eventos.
Propiedad Css Clip-path
Así que para librarnos de esta imposición de los cuatro ángulos rectos de forma real, sencilla y efectiva hemos de emplear otras herramientas:
- Formas y figuras producto de elementos del SVG (elemento
clipPath - La propiedad css
clip-path
La propiedad css clip-path es la sustituta de la obsoleta clip: rect() de Css2.1. Su finalidad es aplicar patrones de recorte a los elementos.
La sintaxis de su valor es una palabra clave seguida de un paréntesis que con cierto valor dentro de él. Más formal: es una función formada por una palabra clave y su valor entre paréntesis:
el {
clip-path: keyword(valor);
}
El valor de la función (lo que va entre los paréntesis) dependerá de la palabra clave usada. Dicha palabra básicamente será una figura elemental rect, circle, ellipse, polygon, path o la cadena url() para indicar la ruta a un recurso: elemento svg clipPath o una imagen para ser usada a manera de máscara.
En el primer caso, figura básica, entre el paréntesis irán los puntos o coordenadas que definen dicha figura y en el segundo (url) la ruta al recurso.
Puedes ampliar este aspecto en artículo las propiedades clip y clip-path y el elemento clipPath
Fíjate bien en los valores usados y la presencia o ausencia de unidades dependiendo de la forma elegida:
<polygon points="0 0, 1 0, 1 1, 0 1, .25 .5" /> En el SVG no hay unidades y los valores están en el rango de 0 a 1 (*1).
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 25% 50%) En Css es necesario el uso de unidades que definen tamaños (length units).
Tanto en Css como en SVG el punto o coordenada 0 0 corresponde a la esquina superior izquierda. Hacia la derecha aumenta el valor de la coordenada X y hacia abajo el de la Y. El punto 100% 100% o 1 1 es la esquina inferior derecha del elemento al que aplicamos la propiedad clip-path
(*1) Realmente el rango puede ser mayor de 1 (100%) o menor de 0 (0%). Si eso ocurre el punto se coloca fuera del viewBox del SVG, por lo que el segmento de línea "sale" fuera de él quedando truncado esa parte del polígono en el límite del viewBox. Como en la figura siguiente.
Soporte navegadores a clip-path
El soporte de los navegadores depende de qué forma declaremos el valor de la propiedad clip-path.
- Si usamos una de las palabras clave para definir las figuras básicas en la misma propiedad (dentro del paréntesis): Chrome 24+, Safari 7+, Opera 15+, iOS 7.1+, Android 4.4+, Opera Mobile 24+
- Si usamos una ruta [url()]:
- Si el Svg está en el mismo documento
clip-path: url(#id)(punto 4.1 de este post): todos los anteriores y Firefox 3.5+. - Si la ruta es a un tercer documento (punto 4.2 del enlace anterior) sólo Firefox.
- Si el Svg está en el mismo documento
Internet Explorer, o mejor dicho, "Edgexplorer" lo tiene en consideración.
A todo lo anterior, añade el posible uso obligado de prefijos privativos.
Más info en caniuse.com o verifícalo tú mismo en el pen a continuación
See the Pen KpaEEv by Kseso (@Kseso) on CodePen.
Animación de la propiedad clip-path
La propiedad Css clip-path es animable tanto vía la propiedad css transition como vía animation incluida en las keyframes de la regla @keyframes siempre y cuando se use una de las palabras clave de figuras básicas con los puntos en el paréntesis.
Si usamos un elemento svg con la palabra clave url no es posible la animación con Css. Es necesario recurrir a SMIL. Nos lo explicó Jorge Aznar en el post: Animaciones nativas de SVG´s con SMIL
Pero para que ocurra la animación hay una condición sine qua non
:
El número de puntos o coordenadas que forman el patrón del recorte ha de ser el mismo en el inicial y el final de la transición o entre todos los patrones si es una animación con keyframes.
Fíjate en qué ocurre con la transición en el siguiente pen:
See the Pen XbpYGM by Kseso (@Kseso) on CodePen.
El primer triángulo está conformado sólo con tres puntos o pares de coordenadas y en el segundo son cuatro, un par de ellas redundantes:
.uno {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.uno:hover {
clip-path: polygon(0% 0%, 100% 0%, 50% 100%)
}
.dos {
clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%);
}
.dos:hover {
clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%)
}
El uso de la palabra clave polygon
en la propiedad css clip-path permite crear formas tan complejas como tu imaginación y paciencia permita. Incluidas aquellas que contienen espacios en blanco dentro de ellas.
Un buen sitio donde encontrar ejemplos con esta propiedad es, ya sabes, codepen.io. De ahí este fork como ejemplo y colofón final:
See the Pen CSS clip-path hover animations by Kseso (@Kseso) on CodePen.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
¡¡¡TE LUCISTE!!! Como me has hecho el día con esto!! :)
ResponderEliminarBueno ya, mas calmado y pensandolo mejor algo así había visto una vez, pero nunca lo escudriñe ni pude encontrar en google (por flojera y falta de intensidad supongo) así que bastante genial el que nos regales esa demo "desprende-pretinas-oculares" así que gracias por compartir. Saludos.
BTW: La única pega que tiene/encontre al menos en chrome, es que para el hover habría que acercarse al "pedazito" de imagen que se ve para hacer correr la animación, pero supongo que con declarar hover al padre, se soluciona ¿no? con las limitaciones que eso conlleva, claro esta.
EliminarSí, claro.
EliminarEs que el efecto de clip-path no es una especie de visibility: hidden; si no de display: none; de los recortes.
Es los huecos el elemento no existe y por lo tanto tampoco los eventos en ellos tienen efecto.
Un saludo
Ahora que están comentando esto, me acordé de un ejemplo que hice hace algún tiempo y recién lo actualicé solamente para ponerle un puntero distinto al clip-path y que se vea eso de que el recorte sobrante es "invisible" al cursor. Como curiosidad, ahí se muestra cómo hacer un "clip con agujero", que es algo que también suelen preguntar cada tanto.
EliminarHighlights clip polygon with :hover.
Saludos a todos.