NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Función CSS : ellipse

30 de Diciembre del 2020 por Josep Antoni Bover. 0 visitas, 0 comentarios, 0 votos
Categorías : CSS.
La web está en segundo plano, animación en pausa.
Cargando animación...

Esta función recorta el área visible del objeto al tamaño del elipse especificado.

Solo se puede utilizar en la propiedad clip-path.

Sintaxis

Animación
ellipse( radioX RadioY [ 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 son opcionales, y 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 podéis ver los pasos de la animación de la derecha :

1
2
3
4
5
clip-path:ellipse(10% 5%);                  /* 10% de radio X, 5% de radio Y                                                    */

clip-path:ellipse(120% 30%);                /* 120% de radio X, 30% de radio Y                                                  */

clip-path:ellipse(80% 150% at 0% 50%);      /* 80% de radio X, 150% de radio Y, 0% posición X, 50% posición Y                   */

clip-path:ellipse(70% 50% at 100% 20px);    /* 70% de radio X, 50% de radio Y, 100% posición X, 20 píxeles posición Y           */

clip-path:ellipse(100px 60% at 50% 150px);  /* 100 píxeles de radio X, 60% de radio Y, 50% posición X, 150 píxeles posición Y   */

Código de ejemplo


Compatibilidad

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

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 : 30/12/2020
Ejemplo modificado por última vez : 30/12/2020

Enlaces relacionados