Propiedades CSS3

En esta página, puedes encontrar todos los grupos de propiedades CSS3 con referencias y descripciones breves.

Lista de propiedades CSS3

Propiedades de animación

Property	Description
animation	Anima (cambia gradualmente de un estilo a otro) las propiedades CSS con valores discretos.
animation-delay	Especifica cuándo comenzará una animación.
animation-direction	Establece cómo debe reproducirse la animación: hacia adelante, hacia atrás o en ciclos alternos.
animation-duration	Define la duración de tiempo (en segundos o milisegundos) que tarda una animación en completar un ciclo.
animation-fill-mode	Establece un estilo para el elemento cuando la animación no se está ejecutando (antes de que comience, después de que termine o ambas).
animation-iteration-count	Define cuántas veces debe reproducirse la animación.
animation-name	Define el nombre de la regla @keyframes que deseas aplicar. Tiene dos valores: none y keyframename.
animation-play-state	Especifica si la animación se está ejecutando o está en pausa.
animation-timing-function	Define cómo progresará la animación durante la duración de cada ciclo, no a lo largo de toda la animación.
@keyframes (at-rule)	La regla @keyframes es la base de las animaciones de fotogramas clave usadas para animar (cambiar gradualmente de un estilo a otro) muchas propiedades CSS.

Propiedades de fondo

Property	Description
background-clip	Especifica hasta dónde deben llegar background-color y background-image desde el elemento.
background-origin	Especifica el área de posicionamiento del fondo de una background-image.
background-size	Define el tamaño de la imagen de fondo.

Propiedades de borde

Property	Description
border-bottom-left-radius	Define la forma redondeada de la esquina inferior izquierda del elemento.
border-bottom-right-radius	Establece el redondeo de la esquina inferior derecha del elemento.
border-image	Permite especificar una imagen como borde alrededor de un elemento.
border-image-outset	Especifica la cantidad en que la imagen del borde se extiende más allá del borde del elemento.
border-image-repeat	Especifica si border-image se redondeará, repetirá o estirará.
border-image-slice	Especifica cómo dividir la imagen indicada por border-image-source en nueve regiones: cuatro esquinas, cuatro bordes y una parte central.
border-image-source	Establece la imagen de origen para crear la imagen del borde de un elemento.
border-image-width	Define el ancho de la imagen del borde.
border-radius	Redondea las esquinas del borde exterior de un elemento.
border-top-left-radius	Define el redondeo de la esquina superior izquierda del elemento. Hay tres tipos de redondeo.
border-top-right-radius	Define la forma redondeada de la esquina superior derecha del elemento. Hay tres tipos de redondeo.

Propiedades de color

Property	Description
opacity	Especifica la transparencia de un elemento.

Diseño de caja flexible

Property	Description
align-content	Alinea las líneas de un contenedor flex cuando hay espacio disponible verticalmente (en el eje transversal).
align-items	Define la alineación predeterminada de los elementos flex a lo largo del eje transversal.
flex	Especifica los componentes de una longitud flexible.
flex-basis	Define el tamaño inicial principal del elemento flexible.
flex-direction	Define el eje principal de un contenedor flex y establece el orden en que aparecen los elementos flex.
flex-flow	Propiedad abreviada para las propiedades flex-wrap y flex-direction.
flex-grow	Especifica cuánto crecerá el elemento en relación con el resto de los elementos del contenedor flex.
flex-shrink	Especifica cuánto se reducirá el elemento en relación con el resto de los elementos del contenedor flex.
flex-wrap	Especifica si los elementos flex deben ajustarse o no.
justify-content	Alinea los elementos cuando no usan todo el espacio disponible horizontalmente.
order	Especifica el orden de un elemento flexible dentro del contenedor flex o grid.

Propiedades de fuente

Property	Description
font-size-adjust	Controla el tamaño de la fuente cuando la primera fuente seleccionada no está disponible.
font-stretch	Hace que el texto sea más estrecho o más ancho.

Propiedades de diseño multicolumna

Property	Description
column-count	Especifica el número de columnas en que se divide el contenido de un elemento.
column-fill	Controla el contenido del elemento cuando se divide en columnas.
column-gap	Establece la longitud del espacio entre columnas.
column-rule	Define el estilo, el ancho y el color de la línea entre columnas.
column-rule-color	Establece el color de la línea.
column-rule-style	Define el estilo de la línea entre columnas.
column-rule-width	Define el ancho de la línea entre columnas.
column-span	Especifica si el elemento abarca una columna o todas las columnas.
column-width	Define el ancho de las columnas.
columns	Propiedad abreviada para column-count y column-width.

Propiedades de contorno

Property	Description
outline-offset	Especifica el espacio entre un contorno y el borde de un elemento.

Propiedades de texto

Property	Description
tab-size	Establece el ancho de un carácter de tabulación.
text-align-last	Establece la alineación de la última línea del texto.
text-decoration-color	Establece el color de la decoración del texto.
text-decoration-line	Especifica el tipo de línea que se usará para la decoración del texto.
text-decoration-style	Especifica el estilo de la decoración del texto.
text-justify	Define el comportamiento del espaciado entre palabras o caracteres.
text-overflow	Especifica cómo se debe indicar al usuario que el texto en línea se desborda.
text-shadow	Permite añadir sombras al texto.
word-break	Especifica dónde deben romperse las líneas.
word-wrap	Permite dividir líneas en palabras para que encajen en su contenedor.

Propiedades de transformación

Property	Description
backface-visibility	Especifica si la cara posterior de un elemento debe ser visible o no.
perspective	Da a un elemento posicionado en 3D cierta perspectiva y determina la distancia respecto al plano z=0.
perspective-origin	Define la posición desde la que el usuario está mirando el elemento posicionado en 3D.
transform	Especifica la transformación bidimensional o tridimensional del elemento.
transform-origin	Permite cambiar la posición de la transformación de los elementos.
transform-style	Especifica cómo se renderizan los elementos hijos en el espacio tridimensional (3D).

Propiedades de transición

Property	Description
transition	Propiedad abreviada para las siguientes propiedades: transition-property, transition-duration, transition-timing-function, transition-delay
transition-delay	Especifica cuándo debe comenzar el efecto de transición.
transition-duration	Especifica cuánto tiempo debe durar la animación de transición.
transition-property	Especifica los nombres de las propiedades para la transición.
transition-timing-function	Especifica el avance de la transición durante su duración, permitiendo cambiar la velocidad.

Propiedades de formato visual

Property	Description
overflow-x	Especifica si el contenido debe ocultarse, mostrarse o desplazarse horizontalmente cuando el contenido desborda los bordes izquierdo y derecho del elemento.
overflow-y	Especifica si el contenido debe ocultarse, mostrarse o desplazarse verticalmente cuando el contenido desborda los bordes superior e inferior del elemento.
resize	Especifica cómo se puede redimensionar el elemento.
box-shadow	Permite implementar múltiples sombras alrededor de la caja especificando valores de color, tamaño, desenfoque, desplazamiento e inserción.
box-sizing	Define el cálculo del width y height de un elemento, si incluyen padding y borders.

Practice