NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Propiedad CSS : clip-path

14 de Junio del 2018 por Josep Antoni Bover. 172 visitas, 0 comentarios, 7 votos con una media de 4.86 sobre 5.
Categorías : CSS.
La web está en segundo plano, animación en pausa.
Cargando animación...

Esta propiedad permite recortar el área visible de un objeto, de forma que el navegador incluso es capaz de utilizar una figura SVG (path) para especificar la figura de un objeto.

Esta propiedad se ha creado para sustituir a la propiedad clip, que a partir de ahora se considera obsoleta.

Sintaxis

clip-path: Valor;


A continuación tienes la lista de valores posibles :

none

No aplica ninguna máscara al objeto / Muestra el objeto tal cual. (valor por defecto)




url()

Especifica que el objeto tomará el área definida de un grupo de objetos dentro de un svg definido con una ID.

Por ejemplo :

1
clip-path:url(mi_archivo.svg#id_grupo); /* SVG externo */



inset()

Animación

El área a mostrar se recortará partiendo de los valores especificados para formar un rectángulo. Los valores se pueden especificar con cualquier tipo de unidad de tamaño relativa válida. Para más información consulta la Referencia CSS : Unidades.

El rectángulo inicial es el objeto completo, y a este se le restan los valores especificados

Podemos especificar hasta 4 valores.
Si especificamos solo un valor, se aplicará a los 4 costados.
Si especificamos 2 valores, el primer valor se asignará a top / bottom, y el segundo valor a left / right.
Si especificamos 3 valores, el primer valor se asignará al top, el segundo al right, y el tercero al bottom.
Si especificamos 4 valores, el primer valor se asignará al top, el segundo al right, y el tercero al bottom, y el cuarto al left.
Por ejemplo :
1
2
3
4
clip-path:inset(10px); /* 10 píxeles menos para el top, bottom, left, right */
clip-path:inset(10px 20px); /* 10 píxeles menos para el top y bottom, 20 píxeles para el left y right */
clip-path:inset(10px 20px, 30px); /* 10 píxeles menos para el top, 20 píxeles para el left y right, 30 píxeles para el bottom */
clip-path:inset(10px 20px, 30px, 40px); /* 10 píxeles menos para el top, 20 píxeles para el right, 30 píxeles para el bottom, 40 píxeles para el left */



circle()

Animación

El área a mostrar será un círculo. El primer valor es el radio y no es opcional, y luego se puede especificar la posición inicial añadiendo at X Y.

El radio debe ser un valor positivo utilizando cualquier tipo de unidad de tamaño relativa válida.

Las coordenadas de inicio se pueden especificar con cualquier tipo de unidad de tamaño relativo válido, tanto positivo como negativo.
Para más información sobre unidades de tamaño relativo, consulta la Referencia CSS : Unidades.

Por ejemplo :

1
2
3
clip-path:circle(5px); /* 5 píxeles de radio */
clip-path:circle(10% at 5px 10px); /* 10% de radio empezando 5 píxeles a la derecha y 10 desde arriba */
clip-path:circle(50px at 25% 75%); /* 50 píxeles de radio empezando un 25% a la derecha y un 75% desde arriba */



ellipse()

Animación

El área a mostrar será un ellipse. Los primeros valores son el radio X y el radio Y y no son opcionales, y luego se puede especificar la posición inicial añadiendo at X Y.

Los radios deben ser un valor positivo utilizando cualquier tipo de unidad de tamaño relativa válida.

Las coordenadas de inicio se pueden especificar con cualquier tipo de unidad de tamaño relativo válido, tanto positivo como negativo.
Para más información sobre unidades de tamaño relativo, consulta la Referencia CSS : Unidades.

Por ejemplo :

1
2
3
clip-path:ellipse(6px 3px); /* 6 píxeles de radio X y 3 píxeles de radio Y */
clip-path:ellipse(10% 30% at 5px 10px); /* 10% de radio X y 30% de radio Y, empezando 5 píxeles a la derecha y 10 píxeles desde arriba */
clip-path:ellipse(500px 50% at 0% 100px); /* 500px de radio X y 50% de radio Y, empezando 0% a la derecha y 100 píxeles desde arriba */



polygon()

Animación

El área a mostrar será un polígono. Para definir el polígono debes definir 3 o más puntos, cada punto debe tener un valor para la X y otro para la Y.

Todas las coordenadas deben ser un valor positivo utilizando cualquier tipo de unidad de tamaño relativa válida. Para más información consulta la Referencia CSS : Unidades.

Por ejemplo :

1
2
3
clip-path:polygon(50% 0%, 0% 100%, 100% 100%); /* Triangulo */
clip-path:polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); /* Trapezoide */
clip-path:polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); /* Cruz */
Pasos de la animación de la derecha (10 puntos)
1
2
3
4
5
clip-path:polygon( 0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%, 0% 60%, 0% 42%, 0% 25%); /* Bocadillo */
clip-path:polygon( 40% 0%, 40% 20%, 100% 20%, 100% 40%, 100% 60%, 100% 80%, 70% 80%, 40% 80%, 40% 100%, 0% 50%); /* Flecha izq. */
clip-path:polygon( 50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%); /* Decágono */
clip-path:polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); /* Estrella */
clip-path:polygon( 0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%); /* Ventana */
Para hacer los polígonos he utilizado la siguiente página : Clippy, El truco para animar desde un polígono a otro es que tienen que tener siempre el mismo número de puntos, por ejemplo el Bocadillo solo tiene 7 puntos por lo que he añadido 3 puntos más para que todos los polígonos de la animación tuvieran 10 puntos .


Área de partida

En la MDN (en inglés, que es la más completa) se menciona que se puede especificar un área de partida (basic-shape) desde donde se calculará el clip-path. SOLO Para firefox (de momento) podemos especificar el área de partida para la función inset. Pero según mis pruebas parece que no funciona con las funciones cirle, ellipse, y polygon.

fill-box Utiliza el área del objeto como referencia.
stroke-box Utiliza el área del trazo como referencia.
view-box Utiliza el viewport del SVG como referencia.
margin-box Utiliza el área del margen del objeto como referencia.
border-box Utiliza el área del borde del objeto como referencia.
padding-box Utiliza el área del relleno del objeto como referencia.
content-box Utiliza el área del contenido del objeto como referencia.
Hasta la fecha de este documento, el área de partida solo funciona en FireFox, y aún no queda muy claro si es solo para la función inset, o más adelante también se podrá utilizar con circle, ellipse y polygon.


Por destacar

Transición MouseOver

La propiedad clip-path se puede utilizar para crear transiciones y animaciones. Existen varias limitaciones, la más importante es que no se pueden combinar funciones, es decir no podemos hacer una transición de la función circle a la función polygon. En definitiva, para realizar una transición / animación se tiene que utilizar siempre la misma función en todos los pasos.

Además si queremos animar un polígono, todas las fases de la animación deben tener el mismo número de puntos / coordenadas. Es decir, no podemos animar un polígono de 8 puntos a un polígono de 10 puntos...

1
2
3
4
5
6
7
.Objeto {
transition:0.4s; /* Transición de 0.4 segundos */
clip-path:inset(10px); /* desde 10 píxeles */
}
.Objeto:hover {
clip-path:inset(20px); /* hasta 20 píxeles */
}
La transición / animación solo será posible si utilizamos en cada paso la misma función. Si por ejemplo hacemos una transición de inset(10px) a circle(20px), la transición no se ejecutará por tratarse de distintas funciones.
Para la función polygon hay que especificar el mismo número de coordenadas en cada paso para que funcione la animación / transición.


Código de ejemplo



Compatibilidad

Esta propiedad es soportada por todos los navegadores compatibles con CSS3.

Soportado a partir de la versión 24
Soportado a partir de la versión 3.5
Soportado a partir de la versión 12
NO soportado
NO soportado

Documento modificado por última vez : 14/06/2018
Ejemplo modificado por última vez : 09/06/2018

Enlaces relacionados