Funciones CSS
Las funciones CSS se utilizan como valor de algunas propiedades CSS. Por ejemplo la función hsl() se utiliza para definir el color utilizado como valor de algunas propiedades como, background-color, border-color, etc…
| Función | Descripción |
|---|---|
| attr() | Abreviado de attribute. Es una función CSS que devuelve una cadena de texto representando el valor de un atributo. Utilizada en el caso de los pseudo-elementos ::before y ::after |
| blur() | Utilizada como valor de filter aplica un desenfoque gaussiano, y toma como único parámetro el radio del blur en pixeles. |
| brightness() | Utilizada como valor de filter modifica el brillo de una imagen o de cualquier otro elemento. |
| calc() | Permite realizar operaciones matemáticas sencillas como: sumar ( + ), restar ( - ), multiplicar ( * ) o dividir ( / ) |
| clamp() | Escoge el valor a utilizar de una lista de 3 valores: el mínimo, el valor deseado y el máximo. |
| circle() | Una función CSS que define un circulo. Utilizada para definir gradientes radiales, un trazado circular para recortar con clip-path o para la propiedad shape-outside |
| conic-gradient() | Una función CSS utilizada para crear gradientes cónicos. |
| contrast() | Utilizada como valor de filter manipula el contraste de una imagen o de cualquier otro elemento. |
| counter() | Utilizada como valor de content ( los pseudo-elementos ::before y ::after ) para añadir un contador, por ejemplo delante de los elementos li de una lista. |
| cubic-bezier() | Utilizada en transiciones y animaciones CSS como valor de transition-timing-function o de animation-timing-function para especificar la curva de velocidad de la animación |
| drop-shadow() | Utilizada como valor de filter aplica una sombra al contorno de un elemento tomando en cuenta las transparencias. |
| ellipse() | Una función CSS que define una elipse. Utilizada para definir gradientes radiales , un trazado elipsoidal para recortar con clip-path o para la propiedad shape-outside |
| grayscale() | Utilizada como valor de filter aplica una escala de grises. |
| hsl() | Una función CSS que define un color hsl. |
| hsla() | Una función CSS que define un color hsla |
| hue-rotate() | Utilizada como valor de filter cambia los colores de una imagen o de cualquier otro elemento. |
| inset() | Una función CSS utilmatrix3d()izada con clip-path o con la propiedad shape-outside para mover el limite exterior de una caja hacia dentro. |
| invert() | Utilizada como valor de filter crea el negativo de la imagen original. |
| linear-gradient() | Una función CSS utilizada para definir gradientes lineales |
| matrix() | Define una transformación 2D, utilizando una matriz de 6 valores. |
| matrix3d() | Define una transformación 3D, utilizando una matriz de 4x4 = 16 valores. |
| max() | Escoge el valor máximo de una lista de valores. |
| min() | Escoge el valor mínimo de una lista de valores. |
| opacity() | Utilizada como valor de filter cambia la opacidad de un elemento. |
| polygon() | Una función CSS que define un polígono. Utilizada para definir un trazado poligonal para recortar con clip-path o para la propiedad shape-outside |
| radial-gradient() | Una función CSS que define un gradiente radial |
| repeating-linear-gradient() | Una función CSS utilizada para crear gradientes lineales repetitivos |
| repeating-radial-gradient() | Una función CSS utilizada para crear gradientes radiales repetitivos |
| rgb() | Una función CSS que define un color rgb |
| rgba() | Una función CSS que define un color rgba |
| rotate() | Define una rotactión 2D, donde a es el ángulo ( en grados hexagesimales ), donde a es el ángulo de rotación. |
| rotate3d() | Define una rotación en un espacio tridimensional ( 3D ) |
| rotateX() | Define una rotación en 3D alrededor del eje x> |
| rotateY() | Define una rotación en 3D alrededor del eje y |
| rotateZ() | Define una rotación en 3D alrededor del eje z |
| saturate() | Utilizada como valor de filter modifica la saturation de los colores de una imagen |
| sepia() | Utilizada como valor de filter convierte una imagen tonos de sepia. |
| scale() | Redimensiona un elemento 2D |
| scale3d() | Redimensiona un elemento en un espacio tridimensional ( 3D ) |
| scaleX() | Redimensiona un elemento en un espacio tridimensional en la dirección del eje x |
| scaleY() | Redimensiona un elemento en un espacio tridimensional en la dirección del eje y |
| scaleZ() | Redimensiona un elemento en un espacio tridimensional en la dirección del eje z |
| skew(ax,ay) | Sesga un elemento a lo largo de sus dos ejes x e y donde ax es el ángulo de deformación en x y ay es el ángulo de deformación en y |
| skewX(ax) | Sesga un elemento a lo largo del eje x (horizontal), donde ax es el ángulo de deformación en x. |
| skewY(ay) | Sesga un elemento a lo largo del eje y (horizontal), donde ay es el ángulo de deformación en y. |
| translate() | Traslada o mueve un elemento a lo largo de los ejes x e y |
| translate3d() | Traslada o mueve un elemento en un espacio tridimensional ( 3D ) a lo largo de los ejes x, y y z |
| translateX() | Traslada o mueve un elemento en un espacio tridimensional ( 3D ) a lo largo del eje x |
| translateY() | Traslada o mueve un elemento en un espacio tridimensional ( 3D ) a lo largo del eje y |
| translateZ() | Traslada o mueve un elemento en un espacio tridimensional ( 3D ) a lo largo del eje z |
| url() | Una función CSS que permite enlazar con una imagen ( background-image, border-image ) una fuente ( @font-face ), un filtro etc... |