Funciones CSS

facebook-svg gplus-svg twitter-svg

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 ( / )
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 utilizada 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.
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...