Propiedades CSS
Descripción [-] [+]
Fondos y colores
Establece un color de texto.
Define el color concreto utilizando RGB/RGBA, HSL/HSLA o palabras clave.
Propiedad de resumen (shorthand) para propiedades CSS2 de fondo.
Atajo
{background-color} {background-image} {background-repeat} {background-attachment} {background-position}
Fondos múltiples
Desde CSS3 se pueden usar varios fondos en un mismo elemento (separando con comas), tanto en esta propiedad shorthand como en cada una de sus propiedades individuales (excepto en background-color). Ej: background:url(image1.png) no-repeat, url(image2.jpg) repeat-x
Establece un color de fondo.
Define el color concreto utilizando RGB/RGBA, HSL/HSLA o palabras clave.
Establece una imagen (o un gradiente) de fondo.
Define la dirección URL (relativa o absoluta) de la imagen a utilizar.
%none
No establece (o elimina) una imagen de fondo.
linear-gradient(d, c1 l, c2 l, ...)
Crea un gradiente lineal, de dos o más colores.
repeating-linear-gradient(d, c1 l, c2 l, ...)
Idem, pero estableciendo una repetición continua de colores.
d
Dirección o ángulo del gradiente.
Define el color concreto utilizando RGB/RGBA, HSL/HSLA o palabras clave.
l
Opcionalmente, se puede indicar el porcentaje o la longitud del color en el gradiente.
radial-gradient(sh s at x y, c1 l, c2 l, ...)
Crea un gradiente radial, de dos o más colores.
repeating-radial-gradient(sh s at x y, c1 l, c2 l, ...)
Idem, pero estableciendo una repetición continua de colores.
sh
Define la forma que tendrá el gradiente radial.
ellipse
Forma de elipse.
circle
Forma de círculo.
s
Establece el tamaño del gradiente radial.
farthest-corner
Establece un tamaño hasta la esquina más alejada.
closest-corner
Establece un tamaño hasta la esquina más cercana.
farthest-side
Establece un tamaño hasta el lado más alejado.
closest-side
Establece un tamaño hasta el lado más cercano.
x
Posición, longitud o porcentaje que coloca el gradiente en el eje x (horizontal).
y
Posición, longitud o porcentaje que coloca el gradiente en el eje y (vertical).
Define el color concreto utilizando RGB/RGBA, HSL/HSLA o palabras clave.
l
Opcionalmente, se puede indicar el porcentaje o la longitud del color en el gradiente.
Establece el tipo de repetición de la imagen de fondo.
repeat-x
Repetir indefinidamente la imagen de fondo en el eje x (horizontalmente).
repeat-y
Repetir indefinidamente la imagen de fondo en el eje y (verticalmente).
%repeat
Repetir indefinidamente la imagen de fondo tanto horizontalmente como verticalmente.
no-repeat
No repetir la imagen de fondo.
Establece el tipo de acoplamiento de la imagen de fondo.
%scroll
Establece que la imagen de fondo se desplace al hacer scroll por la página.
fixed
Establece que la imagen de fondo no se desplace al hacer scroll por la página.
Establece la posición en que comienza la imagen de fondo.
x
1 parámetro. Coloca la imagen en un eje, y centra el otro (o la misma a ambos).
x y
2 parámetros. Coloca la imagen horizontalmente y verticalmente.
x dx y dy
4 parámetros. Coloca y desplaza desde ese punto. (ej: bottom 3px right 5px)
x
Posición, longitud o porcentaje que coloca la imagen en el eje x (horizontal).
y
Posición, longitud o porcentaje que coloca la imagen en el eje y (vertical).
Propiedad de resumen (shorthand) para propiedades CSS3 de fondo.
Atajo
{background-color} {background-position} {background-size} {background-repeat} {background-origin} {background-clip} {background-attachment} {background-image}
Establece que parte del elemento afectará al fondo.
%border-box
El fondo se incluirá en el borde, espaciados y contenido.
padding-box
El fondo se incluirá en los espaciados y contenido.
content-box
El fondo sólo se incluirá en el contenido.
Establece en que parte del elemento comienza el fondo.
border-box
El fondo comenzará en el borde.
%padding-box
El fondo comenzará en el espaciado.
content-box
El fondo comenzará en el contenido.
Especifica el ancho y alto que tendrá la imagen de fondo.
w
1 parámetro. Indica el ancho (el alto se ajusta) o una palabra clave.
cover
Ajusta el alto de la imagen de fondo al elemento.
contain
Ajusta el ancho de la imagen de fondo al elemento.
auto
Utiliza el ancho y alto de la imagen original.
w h
2 parámetros. Establece el ancho y el alto de la imagen de fondo.
w
Longitud o porcentaje de ancho. Auto usa el ancho original de la imagen.
h
Longitud o porcentaje de alto. Auto usa el alto original de la imagen.
Mezcla los colores de las imágenes o los colores de fondo
m
Establece un modo de fusión sobre las imágenes y los colores de fondo.
Cambia el contexto de aislamiento de los modos de fusión en el fondo.
%auto
El navegador gestiona el aislamiento.
isolate
Indica al navegador que se deben crear un nuevo contexto.
Dimensiones
Establece el ancho de un elemento (excluye margin, padding y border).
t
Longitud o porcentaje de tamaño.
auto
El navegador calcula automáticamente el ancho del elemento.
available
El tamaño del bloque de contenido sin contar margin, padding y border.
max-content
El tamaño adecuado (máximo) del contenido del elemento.
min-content
El tamaño intrínseco (mínimo) del contenido del elemento.
fit-content
El valor MAX(min-content, MIN(max-content, available)).
Establece el ancho mínimo que podrá tener el elemento.
t
Longitud o porcentaje de tamaño.
available
El tamaño del bloque de contenido sin contar margin, padding y border.
max-content
El tamaño adecuado (máximo) del contenido del elemento.
min-content
El tamaño intrínseco (mínimo) del contenido del elemento.
fit-content
El valor MIN(max-content, MAX(min-content, available)).
Establece el ancho máximo que podrá tener el elemento.
t
Longitud o porcentaje de tamaño.
available
El tamaño del bloque de contenido sin contar margin, padding y border.
max-content
El tamaño adecuado (máximo) del contenido del elemento.
min-content
El tamaño intrínseco (mínimo) del contenido del elemento.
fit-content
El mismo valor que max-content.
Establece el alto de un elemento (excluye margin, padding y border)
t
Longitud o porcentaje de tamaño.
auto
El navegador calcula automáticamente el ancho del elemento.
available
El tamaño del bloque de contenido sin contar margin, padding y border.
max-content
El tamaño adecuado (máximo) del contenido del elemento.
min-content
El tamaño intrínseco (mínimo) del contenido del elemento.
fit-content
El valor MAX(min-content, MIN(max-content, available)).
Establece el alto mínimo que podrá tener el elemento.
t
Longitud o porcentaje de tamaño.
available
El tamaño del bloque de contenido sin contar margin, padding y border.
max-content
El tamaño adecuado (máximo) del contenido del elemento.
min-content
El tamaño intrínseco (mínimo) del contenido del elemento.
fit-content
El valor MIN(max-content, MAX(min-content, available)).
Establece el alto máximo que podrá tener el elemento.
t
Longitud o porcentaje de tamaño.
available
El tamaño del bloque de contenido sin contar margin, padding y border.
max-content
El tamaño adecuado (máximo) del contenido del elemento.
min-content
El tamaño intrínseco (mínimo) del contenido del elemento.
fit-content
El mismo valor que max-content.
Fuentes y tipografías
Propiedad de resumen (shorthand) para propiedades CSS de tipografías.
Atajo
{font-style} {font-variant} {font-weight} {font-size}/{line-height} {font-family}
Line-height
La propiedad line-height es opcional. En ese caso se omite /{line-height}.
Define la tipografía (tipo de letra) a utilizar.
t1, t2, ..., ts
Establece una lista de fuentes a utilizar (por prioridad).
t
Establece el nombre de la tipografía a utilizar (si está instalada en el sistema).
Espacios
Si el nombre contiene espacios, se recomienda usar comillas simples: 'Emezeta Serif'
ts
Establece un tipo de tipografía segura a utilizar en caso de no existir anteriores.
serif
Tipografía con serifa.
sans-serif
Tipografía sin serifa.
cursive
Tipografía cursiva.
fantasy
Tipografía de decoración.
monospace
Tipografía monoespaciada (mismo ancho de carácteres).
Establece el tamaño de la tipografía a utilizar.
t
Especifica el tamaño de la fuente.
t
Longitud o porcentaje de la tipografía. Valores negativos no permitidos.
t
Especifica un tamaño absoluto predefinido.
xx-small
Tamaño muy, muy pequeño.
x-small
Tamaño muy pequeño.
small
Tamaño pequeño.
medium
Tamaño medio (normal).
large
Tamaño grande.
x-large
Tamaño muy grande.
xx-large
Tamaño muy, muy grande.
t
Especifica un tamaño relativo al tamaño del elemento padre.
smaller
Define un tamaño más pequeño.
larger
Define un tamaño más grande.
Establece el estilo de la tipografía.
normal
Estilo de texto normal.
italic
Estilo de texto cursiva.
oblique
Estilo de texto oblicuo.
Establece el peso (grosor) de la tipografía.
t
Establece el grosor de la tipografía con un valor del 100 al 900 (de 100 en 100, sin unidad).
Peso
Consulta que pesos soporta cada tipografía (ciertas fuentes sólo soportan algunos pesos).
t
Especifica un tamaño absoluto predefinido.
%normal
Establece un grosor normal para el texto.
bold
Establece el grosor del texto en negrita.
t
Especifica un tamaño relativo al tamaño del elemento padre.
lighter
Establece un grosor de texto más fino.
bolder
Establece un grosor de texto más ancho.
Establece una variación en el formato del texto.
%normal
Establece el texto sin variaciones.
small-caps
Establece el texto en versalitas.
Indica el nivel de expansión o condensación de la tipografía.
ultra-condensed
La tipografía tiene un grado de condensación máximo.
extra-condensed
La tipografía está muy condensada.
condensed
La tipografía está condensada.
semi-condensed
La tipografía está ligeramente condensada.
%normal
La tipografía permanece sin cambios.
semi-expanded
La tipografía está ligeramente expandida.
expanded
La tipografía está expandida.
extra-expanded
La tipografía está muy expandida.
ultra-expanded
La tipografía tiene un grado de expansión máximo.
Indica la relación de aspecto de las fuentes (ideal con tipografías secundarias).
n
Valor decimal de 0 a 1.0 que se multiplica por el tamaño de la fuente.
none
No modifica el tamaño de la tipografía.
Permite o impide al navegador utilizar negritas o cursivas.
none
Impide al navegador utilizar negrita o cursiva en los textos.
weight
Permite usar negrita en los textos (pero no cursiva).
style
Permite usar cursiva en los textos (pero no negrita).
weight style
Permite usar negrita y cursiva en los textos.
Ajusta el kerning (interletraje) de los textos, si la tipografía lo soporta.
%auto
El navegador decide si activar o desactivar el kerning de la fuente.
normal
Ajusta el kerning de la fuente.
none
Impide al navegador ajustar el kerning de la fuente.
Textos y carácteres
Establece el tipo de trazado sobre el texto (subrayado, tachado...)
%none
Establece el texto sin ningún tipo de trazado.
underline
Establece un subrayado en el texto.
overline
Establece un trazado en la parte superior del texto.
line-through
Establece un trazado tachando el texto.
Transforma el texto a mayúsculas, minúsculas o capitalizado.
%none
Establece el texto sin ningún tipo de transformación.
capitalize
Capitaliza el texto (transforma a mayúsculas la primera letra de las palabras).
lowercase
Transforma el texto a minúsculas.
uppercase
Transforma el texto a mayúsculas.
Establece el espacio entre letras en textos.
t
Establece una longitud definida entre letras (tracking) a utilizar. Permite valores negativos.
%normal
Establece el tamaño entre letras (tracking) por defecto.
Altura de las líneas de texto (interlineado).
t
Establece una longitud de texto (interlineado) específico.
%normal
Establece la altura entre líneas por defecto.
Indica si se debe cortar líneas de texto (cuando sea necesario).
auto
Corta líneas de texto usando el sistema por defecto.
loose
Corta líneas de texto usando la línea más corta (similar a un periódico).
normal
Corta líneas de texto.
strict
Corta líneas de texto usando un sistema riguroso.
Indica el espacio horizontal al principio de la primera línea de texto (sangrado).
t
Establece una longitud específica de indentado de texto (sangrado).
Determina como tratar el texto (inline) que desborda un contenedor (block).
t
Indica un texto personalizado a utilizar o una palabra clave.
clip
Recorta y muestra sólo el texto visible.
ellipsis
Recorta el texto visible y añade un "..." al final.
Indica como alinear la última línea de un texto.
auto
El navegador alinea el texto según la propiedad *text-align*.
left
El contenido se alinea a la izquierda.
right
El contenido se alinea a la derecha.
center
El contenido permanece centrado.
justify
El contenido permanece justificado (se ajusta el largo de las líneas).
start
Izquierda (para idiomas que comienza a leerse desde la izquierda).
end
Derecha (para idiomas que comienza a leerse desde la izquierda).
Indica el método de justificación de textos del navegador.
%auto
El navegador determina el algoritmo de justificación que considera adecuado.
inter-word
Ajusta el espacio de la justificación entre palabras.
distribute
Distribuye el espacio de la justificación entre pares adyacentes de carácteres.
none
Desactiva la justificación.
Define el espacio entre palabras.
t
Establece una longitud definida entre palabras.
%normal
Establece un tamaño de espacio entre palabras normal.
Define si es posible cortar palabras de un texto que no quepan en un contenedor.
normal
El navegador utiliza el comportamiento por defecto.
keep-all
No permite cortar palabras en un texto.
break-all
Permite cortar palabras en un texto.
Establece el comportamiento de los espacios en blanco del texto.
%normal
Espacios, tabuladores y líneas nuevas son convertidas a un espacio en blanco. Se amolda al contenedor.
nowrap
Idem al anterior, pero no se amolda al contenedor.
pre
Preserva espacios, tabuladores y líneas nuevas. No se amolda al contenedor.
pre-wrap
Idem al anterior, pero se amolda al contenedor.
pre-line
Convierte espacios y tabuladores en un espacio en blanco. Preserva líneas nuevas. Se amolda al contenedor.
Establece el tamaño de los tabuladores en un texto (por defecto, 8).
t
Establece el *número* de espacios para representar los tabuladores.
Define la alineación del texto: izquierda, derecha, centrado o justificado.
%left
Alinea el texto a la izquierda.
right
Alinea el texto a la derecha.
center
Centra el texto.
justify
Justifica el texto (equilibra los espacios en blanco).
Indica la alineación vertical de un elemento inline (o la celda de una tabla).
%baseline
Alinea la base del elemento con la base de su contenedor.
sub
Alinea la base del elemento con la base de los subíndices de su contenedor.
super
Alinea la base del elemento con la base de los superíndices de su contenedor.
text-top
Alinea la parte superior del elemento con la parte superior del texto del contenedor.
text-bottom
Alinea la base del elemento con la base del texto del contenedor.
middle
Alinea la mitad del elemento con la mitad de la altura del texto del contenedor.
top
Alinea la parte superior del elemento y sus descendientes con la parte superior de la línea entera.
bottom
Alinea la base del elemento y sus descendientes con la base de la línea entera.
tamaño
Especifica el tamaño de alineación vertical. Se permiten valores negativos.
Indica si cortar líneas para evitar desbordamiento. Antes usada como word-wrap.
normal
Establece que las líneas sólo se deben cortar en puntos normales de palabras.
break-word
Establece que las líneas se deben cortar desde que desborde el contenedor.
Indica si una palabra debe cortarse por sílabas. Influye el idioma (atributo lang).
none
No se cortan palabras. Las líneas sólo se cortarán en los espacios.
%manual
Las palabras son cortadas sólo en las oportunidades de corte (ver etiqueta wbr).
auto
El navegador se encarga de controlar los puntos de corte de las palabras.
Sombras
Establece una sombra a un elemento HTML.
x y b g c
Definimos una (o varias) sombras con desplazamientos, desenfoque y color.
x
Longitud de desplazamiento de la sombra en el eje x (horizontal).
y
Longitud de desplazamiento de la sombra en el eje y (vertical).
b
Longitud de desenfoque de la sombra (0 = sombra sin desenfoque). Opcional.
g
Longitud de extensión o crecimiento de la sombra. Opcional.
Define el color concreto utilizando RGB/RGBA, HSL/HSLA o palabras clave.
inset
Añadiendo esta palabra, la sombra es interior en lugar de exterior.
none
Elimina (o no establece) sombra alguna en el elemento.
Sombras múltiples
Al igual que los fondos, se pueden definir sombras múltiples separando mediante comas.
Establece una sombra a un elemento de texto.
x y b c
Definimos una (o varias) sombras con desplazamientos, desenfoque y color.
x
Longitud de desplazamiento de la sombra en el eje x (horizontal).
y
Longitud de desplazamiento de la sombra en el eje y (vertical).
b
Longitud de desenfoque de la sombra (0 = sombra sin desenfoque). Opcional.
Define el color concreto utilizando RGB/RGBA, HSL/HSLA o palabras clave.
none
Elimina (o no establece) sombra alguna en el elemento.
Tablas
Indica si las tablas deben tener espacio entre celdas.
%separate
Con espacio. Las celdas tendrán un borde diferente al borde de la tabla.
collapse
Sin espacio. Las celdas tendrán el mismo borde de la tabla.
Indica el tamaño de separación entre tablas y celdas.
t
Longitud de separación de las celdas de una tabla.
Posiciona la leyenda de una tabla (elemento caption).
top
Posiciona la leyenda en la parte superior de la tabla.
bottom
Posiciona la leyenda en la parte inferior de la tabla.
Indica si el navegador debe mostrar o no las celdas vacías de una tabla.
%show
Muestra las celdas vacías (se ve el fondo o el borde).
hide
Oculta las celdas vacías.
Indica que algoritmo se debe utilizar para construir las tablas.
%auto
Construye la tabla de forma automática.
fixed
Construye la tabla de forma fija (los tamaños no varían).
Tipo de elemento
Cambia el tipo de comportamiento del elemento.
%inline
Elemento en línea (uno a continuación de otro). Ignora width y height.
block
Elemento en bloque (uno debajo de otro).
inline-block
Elemento en línea que se comporta como bloque (no ignora width y height).
none
Elemento oculto. No es visible ni ocupa espacio.
list-item
Elemento de una lista.
table
Tabla.
table-row
Fila de una tabla.
table-cell
Celda de una tabla.
table-column
Columna de una tabla.
table-caption
Leyenda de una tabla.
table-column-group
Agrupación de columnas de una tabla.
table-header-group
Agrupación de cabeceras de una tabla.
table-footer-group
Agrupación del pie de una tabla.
table-row-group
Agrupación de filas de una tabla.
inline-table
Tabla que se comparta como un elemento en línea.
run-in
Automático. Elemento en línea o en bloque (dependiendo del contexto).
flex
Elemento flexible (Ver flexbox)
inline-flex
Elemento flexible que se comporta como un elemento en línea.
grid
Se comporta como una cuadrícula.
inline-grid
Cuadrícula en línea.
Establece la visibilidad del elemento en la página.
%visible
El elemento es visible.
hidden
El elemento no es visible (pero sigue ocupando su espacio correspondiente).
collapse
El elemento no es visible ni ocupa espacio (útil para colapsar/desplegar elementos).
Modelo de cajas
Establece un margen (espacio exterior al borde) al elemento.
x
1 parámetro. Aplica la longitud o porcentaje indicado a los 4 márgenes del elemento.
a e
2 parámetros. Aplica la longitud o porcentaje indicado a los márgenes específicos (ver abajo).
t e b
3 parámetros. Aplica la longitud o porcentaje indicado a los márgenes específicos (ver abajo).
t r b l
4 parámetros. Aplica la longitud o porcentaje indicado a los márgenes específicos (ver abajo).
a
Aplica el tamaño a sólo a la parte superior e inferior (top y bottom).
e
Aplica el tamaño e sólo a la parte izquierda y derecha (left y right).
t
Aplica el tamaño t sólo a la parte superior del elemento (top).
r
Aplica el tamaño r sólo a la parte derecha del elemento (right).
b
Aplica el tamaño b sólo a la parte inferior del elemento (bottom).
l
Aplica el tamaño l sólo a la parte izquierda del elemento (left).
Establece un margen superior al elemento.
x
Longitud o porcentaje que se aplicará a dicho margen.
Establece un margen derecho al elemento.
x
Longitud o porcentaje que se aplicará a dicho margen.
Establece un margen inferior al elemento.
x
Longitud o porcentaje que se aplicará a dicho margen.
Establece un margen izquierdo al elemento.
x
Longitud o porcentaje que se aplicará a dicho margen.
Establece un espaciado (espacio interior al borde) al elemento.
x
1 parámetro. Aplica la longitud o porcentaje indicado a los 4 lados del elemento.
a e
2 parámetros. Aplica la longitud o porcentaje indicado a los espaciados específicos (ver abajo).
t e b
3 parámetros. Aplica la longitud o porcentaje indicado a los espaciados específicos (ver abajo).
t r b l
4 parámetros. Aplica la longitud o porcentaje indicado a los espaciados específicos (ver abajo).
a
Aplica el tamaño a sólo a la parte superior e inferior (top y bottom).
e
Aplica el tamaño e sólo a la parte izquierda y derecha (left y right).
t
Aplica el tamaño t sólo a la parte superior del elemento (top).
r
Aplica el tamaño r sólo a la parte derecha del elemento (right).
b
Aplica el tamaño b sólo a la parte inferior del elemento (bottom).
l
Aplica el tamaño l sólo a la parte izquierda del elemento (left).
Establece un espaciado en la zona superior.
x
Longitud o porcentaje que se aplicará a dicho espaciado.
Establece un espaciado en la zona derecha.
x
Longitud o porcentaje que se aplicará a dicho espaciado.
Establece un espaciado en la zona inferior.
x
Longitud o porcentaje que se aplicará a dicho espaciado.
Establece un espaciado en la zona izquierda.
x
Longitud o porcentaje que se aplicará a dicho espaciado.
Altera el comportamiento del modelo de cajas del navegador.
%content-box
Comportamiento por defecto de CSS. Width y Height excluyen margin, border y padding.
padding-box
Width y Height incluyen padding, pero excluyen margin y border.
border-box
Width y Height incluyen padding y border, pero excluyen margin.
Permite al usuario redimensionar elementos.
%none
El usuario no puede cambiar las dimensiones de un elemento.
both
El usuario puede cambiar el ancho y alto de un elemento.
horizontal
El usuario puede cambiar sólo el ancho de un elemento.
vertical
El usuario puede cambiar sólo el alto de un elemento.
Bordes
Propiedad de resumen (shorthand) para establecer bordes a los elementos.
Atajo
{border-width} {border-style} {border-color}
Indica el color de los bordes del elemento.
Define el color concreto utilizando RGB/RGBA, HSL/HSLA o palabras clave.
border-*-color
Es posible utilizar propiedades como border-top-color, border-right-color, border-bottom-color o border-left-color para indicar el color sólo en el borde especificado.
Indica el estilo de los bordes del elemento.
none
Sin borde.
solid
Estilo sólido e ininterrumpido.
dotted
Estilo punteado.
dashed
Estilo rayado.
double
Estilo doble (dos líneas).
groove
Estilo 3D interno.
ridge
Estilo 3D externo.
inset
Estilo biselado (hacia dentro).
outset
Estilo biselado (hacia fuera).
border-*-style
Es posible utilizar propiedades como border-top-style, border-right-style, border-bottom-style o border-left-style para indicar el estilo sólo en el borde especificado.
Indica el grosor que tendrá el borde del elemento.
thin
Grosor fino predefinido.
medium
Grosor medio predefinido.
thick
Grosor ancho predefinido.
border-*-width
Es posible utilizar propiedades como border-top-width, border-right-width, border-bottom-width o border-left-width para indicar el grosor sólo en el borde especificado.
Redondea las esquinas de un elemento aplicando un radio al borde.
x
1 parámetro. Indica una longitud o porcentaje para redondear las 4 esquinas.
ad bc
2 parámetros. Indica una longitud o porcentaje para redondear esquinas específicas (ver abajo).
a bc d
3 parámetros. Indica la longitud o porcentaje para redondear esquinas específicas (ver abajo).
a b c d
4 parámetros. Indica la longitud o porcentaje para redondear esquinas específicas (ver abajo).
a
Aplica un radio de tamaño a sólo a la esquina superior izquierda (top-left).
b
Aplica un radio de tamaño b sólo a la esquina superior derecha (top-right).
c
Aplica un radio de tamaño c sólo a la esquina inferior izquierda (bottom-left).
d
Aplica un radio de tamaño d sólo a la esquina inferior derecha (bottom-right).
ad
Aplica un radio de tamaño ad a las esquinas superior izquierda e inferior derecha (top-left y bottom-right).
bc
Aplica un radio de tamaño bc a las esquinas superior derecha e inferior izquierda (top-right y bottom-left).
Doble
Es posible utilizar el formato x / y en lugar de x para especificar un radio horizontal (x) y vertical (y) por separado.
Redondea la esquina superior izquierda aplicando un radio.
x
Longitud o porcentaje del tamaño del radio (0 = no redondeado).
Redondea la esquina superior derecha aplicando un radio.
x
Longitud o porcentaje del tamaño del radio (0 = no redondeado).
Redondea la esquina inferior izquierda aplicando un radio.
x
Longitud o porcentaje del tamaño del radio (0 = no redondeado).
Redondea la esquina inferior derecha aplicando un radio.
x
Longitud o porcentaje del tamaño del radio (0 = no redondeado).
Utiliza una imagen extensible (previamente preparada) en los bordes.
Atajo
{border-image-source} {border-image-slice} {border-image-width} {border-image-outset} {border-image-repeat}
Indica el tamaño en el que crecen los bordes del elemento.
x
1 parámetro. Longitud o porcentaje en la que crecen todos los bordes.
h v
2 parámetros. Longitud o porcentaje en la que crecen los bordes especificados (ver abajo).
t h b
3 parámetros. Longitud o porcentaje en la que crecen los bordes especificados (ver abajo).
t r b l
4 parámetros. Longitud o porcentaje en la que crecen los bordes especificados (ver abajo).
t
Aplica un crecimiento de t al borde superior (top).
r
Aplica un crecimiento de r al borde derecho (right).
b
Aplica un crecimiento de b al borde inferior (bottom).
l
Aplica un crecimiento de l al borde izquierdo (left).
h
Aplica un crecimiento de h a los bordes izquierdo (left) y derecho (right).
v
Aplica un crecimiento de v a los bordes superior (top) e inferior (bottom).
Define como se repetirán los bordes con imágenes.
x
Aplica la repetición a todos los bordes.
x y
Aplica la repetición a los bordes izquierdo y derecho (x) y a los bordes superior e inferior (y).
%stretch
La imagen se estira hasta cubrir todo el área.
repeat
La imagen se repite hasta cubrir todo el área. Se puede partir un fragmento.
round
La imagen se repite, estirando cada fragmento ligeramente hasta cubrir todo el área.
space
La imagen se repite, introduciendo espacios entre fragmentos para cubrir todo el área.
Indica donde realizar los recortes en la imagen para utilizar en los bordes.
x
1 parámetro. Desplaza cada límite de recorte x unidades (píxels o porcentajes).
h v
2 parámetros. Coloca varios límites de recorte específicos (ver abajo).
t h b
3 parámetros. Coloca varios límites de recorte específicos (ver abajo).
t r b l
4 parámetros. Coloca varios límites de recorte específicos (ver abajo).
h
Establece un número o porcentaje para los límites de recorte horizontales (left y right).
v
Establece un número o porcentaje para los límites de recorte verticales (top y bottom).
t
Establece un número o porcentaje para el límite de recorte superior (top).
r
Establece un número o porcentaje para el límite de recorte derecho (right).
b
Establece un número o porcentaje para el límite de recorte inferior (bottom).
l
Establece un número o porcentaje para el límite de recorte izquierdo (left).
Sin unidades
Ojo. La propiedad border-image-slice no indica unidades en los valores.
Indica una imagen extensible para utilizar de borde.
Define la dirección URL (relativa o absoluta) de la imagen a utilizar.
Especifica el ancho del borde con imagen del elemento.
x
1 parámetro. Indica el ancho de los 4 bordes.
h v
2 parámetros. Indica el ancho de los bordes específicos (ver abajo).
t h b
3 parámetros. Indica el ancho de los bordes específicos (ver abajo).
t r b l
4 parámetros. Indica el ancho de los bordes específicos (ver abajo).
h
Longitud, porcentaje o número para el tamaño de los bordes izquierdo y derecho.
v
Longitud, porcentaje o número para el tamaño de los bordes superior e inferior.
t
Longitud, porcentaje o número para el tamaño del borde superior.
r
Longitud, porcentaje o número para el tamaño del borde derecho.
b
Longitud, porcentaje o número para el tamaño del borde inferior.
l
Longitud, porcentaje o número para el tamaño del borde izquierdo.
auto
Usa el tamaño intrínseco (si es aplicable) o el tamaño de border-width.
Outlines (contornos)
Establece un contorno a elementos visuales para hacerlo destacar.
Atajo
{outline-width} {outline-style} {outline-color}
Especifica un color para el contorno.
Define el color concreto utilizando RGB/RGBA, HSL/HSLA o palabras clave.
invert
Invierte el color utilizado, garantizando que el contorno siempre será visible.
Especifica un estilo de línea para el contorno.
solid
Estilo sólido e ininterrumpido.
dotted
Estilo punteado.
dashed
Estilo rayado.
double
Estilo doble (dos líneas).
groove
Estilo 3D interno.
ridge
Estilo 3D externo.
inset
Estilo biselado (hacia dentro).
outset
Estilo biselado (hacia fuera).
Especifica el grosor del contorno.
thin
Grosor fino predefinido.
medium
Grosor medio predefinido.
thick
Grosor ancho predefinido.
Indica el desplazamiento desde el cuál se empezará a dibujar el contorno.
x
Indica la longitud del desplazamiento. Por defecto, 0.
Posicionamiento
Cambia el tipo de posicionamiento de un elemento.
%static
Sin posicionamiento. Los elementos se colocan según el flujo natural.
absolute
Posiciona tomando el contenedor padre con posicionamiento diferente a estático como inicio. Si no encuentra ningún padre con estas propiedades, toma la etiqueta body como origen.
relative
Posiciona los elementos a partir de su posición estática, permitiendo desplazamientos.
fixed
Idéntico a absolute, pero manteniéndose siempre en la misma posición visible del navegador.
Desplaza el elemento desde la parte superior. Requiere posicionamiento.
x
Longitud o porcentaje que se moverá el elemento (depende del posicionamiento).
%auto
Valor asignado automáticamente por el navegador.
Desplaza el elemento desde la parte derecha. Requiere posicionamiento.
x
Longitud o porcentaje que se moverá el elemento (depende del posicionamiento).
%auto
Valor asignado automáticamente por el navegador.
Desplaza el elemento desde la parte inferior. Requiere posicionamiento.
x
Longitud o porcentaje que se moverá el elemento (depende del posicionamiento).
%auto
Valor asignado automáticamente por el navegador.
Desplaza el elemento desde la parte izquierda. Requiere posicionamiento.
x
Longitud o porcentaje que se moverá el elemento (depende del posicionamiento).
%auto
Valor asignado automáticamente por el navegador.
Establece la profundidad (eje z) de un elemento. Requiere posicionamiento.
n
Valor numérico que indica el nivel del elemento en el eje Z (profundidad). Valores bajos, se posicionan detrás de los elementos. Valores altos, encima.
Desplazamiento
Indica si un elemento debería «flotar» hacia una dirección.
%none
No hace flotar el elemento (comportamiento por defecto).
left
Hace flotar el elemento a la izquierda.
right
Hace flotar el elemento a la derecha.
Indica el comportamiento de los elementos adyacentes a los elementos flotantes.
%none
No hay restricciones en dichos elementos.
left
Hace que el elemento descienda por debajo del elemento flotante a la izquierda.
right
Hace que el elemento descienda por debajo del elemento flotante a la derecha.
both
Hace que el elemento descienda por debajo de cualquier elemento flotante.
Teclado, ratón y touch
Cambia el cursor del ratón al moverlo sobre el elemento.
Imagen del cursor. Opcionalmente se puede indicar la posición del puntero: URL(i) x y
%auto
El navegador determina el cursor basado en el contexto.
default
Muestra el cursor por defecto del sistema (generalmente, una flecha).
none
Vuelve invisible el cursor.
crosshair
Muestra una cruz (generalmente, signo '+').
help
Muestra un cursor de ayuda.
move
Muestra un cursor de movimiento.
pointer
Muestra un cursor de puntero (generalmente, una mano señalando).
text
Muestra un cursor de texto (generalmente, signo 'I').
wait
Muestra un cursor de espera (el usuario debe esperar).
progress
Muestra un cursor de espera (pero el usuario puede seguir trabajando).
context-menu
Muestra un cursor de menú contextual.
cell
Muestra una cruceta de selección de celdas (tipo Excel).
vertical-text
Muestra un cursor de texto en dirección vertical.
alias
Muestra un cursor junto a una flecha de acceso directo.
copy
Muestra un cursor junto a un pequeño signo '+'.
no-drop
Muestra un cursor de prohibido (no se puede arrastrar nada aquí).
not-allowed
Muestra un cursor de prohibido (acción no permitida).
all-scroll
Muestra un cursor con flechas en 4 direcciones.
col-resize
Muestra un cursor de redimensión de columnas (horizontal).
row-resize
Muestra un cursor de redimensión de filas (vertical).
n-resize
Muestra un cursor de redimensión vertical (north).
ne-resize
Muestra un cursor de redimensión diagonal (north-east).
e-resize
Muestra un cursor de redimensión horizontal (east).
se-resize
Muestra un cursor de redimensión diagonal (south-east).
s-resize
Muestra un cursor de redimensión vertical (south).
sw-resize
Muestra un cursor de redimensión diagonal (south-west).
w-resize
Muestra un cursor de redimensión horizontal (west).
nw-resize
Muestra un cursor de redimensión diagonal (north-west).
ew-resize
Muestra un cursor de redimensión horizontal (east-west).
ns-resize
Muestra un cursor de redimensión vertical (north-south).
nesw-resize
Muestra un cursor de redimensión diagonal (north-east-south-west).
nwse-resize
Muestra un cursor de redimensión diagonal (north-west-south-east).
zoom-in
Muestra un cursor de acercar zoom (zoom con signo '+').
zoom-out
Muestra un cursor de alejar zoom (zoom con signo '-').
grab
Muestra un cursor de arrastrar elementos (generalmente, mano abierta).
grabbing
Muestra un cursor de arrastrando elementos (generalmente, mano cerrada).
Controla el filtrado de gestos (touch-scroll, pinch-zoom o double-tap-zoom)
x
1 parámetro. Indica una palabra clave que determina el tipo de control de gestos.
%auto
El navegador determina que gestos están permitidos.
none
Desactiva cualquier gesto al tocar el dispositivo.
manipulation
Permite sólo gestos de manipulación (scroll o zoom contínuo).
x y
2 parámetros. Indica dos palabras clave que determina el tipo de control de gestos.
x
Control de gestos en horizontal.
pan-x
Permite sólo gestos de scroll horizontales.
pan-left
Permite sólo gestos de scroll desde la izquierda.
pan-right
Permite sólo gestos de scroll desde la derecha.
y
Control de gestos en vertical.
pan-y
Permite sólo gestos de scroll verticales.
pan-up
Permite sólo gestos de scroll desde arriba.
pan-down
Permite sólo gestos de scroll desde abajo.
Listas
Indica el estilo que se aplicará a las listas.
Atajo
{list-style-type} {list-style-position} {list-style-image}
Indica la apariencia del signo de cada ítem de una lista.
none
No muestra ningún signo.
%disc
Muestra un pequeño circulo relleno.
circle
Muestra un pequeño circulo vacío.
square
Muestra un pequeño cuadrado relleno.
decimal
Muestra números decimales (1, 2, 3...).
decimal-leading-zero
Muestra números decimales con cero (01, 02, 03...)
lower-alpha
Muestra letras minúsculas (a, b, c...). Similar a lower-latin.
upper-alpha
Muestra letras mayúsculas (A, B, C...). Similar a upper-latin.
lower-roman
Muestra números romanos en minúsculas (i, ii, iii...).
upper-roman
Muestra números romanos en mayúsculas (I, II, III...).
lower-greek
Muestra letras griegas en minúsculas (α, β, γ...).
armenian
Muestra numeración armenia (Ա, Բ, Գ...).
georgian
Muestra numeración georgiana (ა, ბ, გ...).
Indica la posición de los signos de la lista.
inside
Los signos permanecen fuera de cada item (li).
%outside
Los signos permancen dentro de cada item (li).
Indica una imagen para utilizar como signo de la lista.
Imagen del cursor. Opcionalmente se puede indicar la posición del puntero: URL(i) x y
%none
No utiliza ninguna imagen.
Flexbox
Propiedad de resumen (shorthand) para cajas o elementos flexibles.
Atajo
{flex-direction} {flex-wrap}
Indica la orientación de los elementos en un contenedor flex.
%row
Orienta los elementos en dirección de un elemento inline (filas).
row-reverse
Orienta los elementos en dirección inversa de un elemento inline (filas inversas).
column
Orienta los elementos en dirección de un elemento block (columnas).
column-reverse
Orienta los elementos en dirección inversa de un elemento block (columnas inversas).
Indica si el contenedor es de una sola línea o de varias.
%nowrap
Los elementos se colocan en una sola linea.
wrap
Los elementos se colocan en varias líneas.
wrap-reverse
Idem al anterior, pero en orden inverso.
Propiedad de resumen (shorthand) para la naturaleza de los contenedores flex.
Atajo
{flex-grow} {flex-shrink} {flex-basis}
Establece el factor de crecimiento de un contenedor flex.
n
Número de factor de crecimiento. Por defecto, 0.
Establece el factor de decrecimiento de un contenedor flex.
n
Número de factor de decrecimiento. Por defecto, 1.
Especifica el tamaño inicial de los elementos del contenedor flex.
t
Longitud o porcentaje de cada ítem.
content
Indica un tamaño basado en el contenido.
auto
Establece el tamaño de forma automática.
Alinea los items de un contenedor flex multisección (cuando hay espacio).
flex-start
Alineado al inicio de la sección.
flex-end
Alineado al final de la sección.
center
Alineado al centro de la sección.
space-between
Alineado con espacio en el centro.
space-around
Alineado con espacio alrededor.
stretch
Estira los items para que ocupen todo el espacio.
Alinea los items de un contenedor flex con una sección (cuando hay espacio).
flex-start
Alineado al inicio del contenedor.
flex-end
Alineado al final del contenedor.
center
Alineado al centro del contenedor.
baseline
Alineado en la base del contenido del contenedor.
stretch
Estira los items para que ocupen todo el espacio.
Sobreescribe la alineación de un contenedor para ítems especificos.
flex-start
Alineado al inicio del contenedor.
flex-end
Alineado al final del contenedor.
center
Alineado al centro del contenedor.
baseline
Alineado en la base del contenido del contenedor.
stretch
Estira los items para que ocupen todo el espacio.
Justifica o alinea los ítems de un contenedor en horizontal.
flex-start
Alineado al inicio de la sección.
flex-end
Alineado al final de la sección.
center
Alineado al centro de la sección.
space-between
Alineado con espacio en el centro.
space-around
Alineado con espacio alrededor.
Indica la posición en donde se colocará el ítems en un contenedor flex.
n
Número con la posición (sección flex) donde se colocará.
Objetos o elementos
Establece un grado de transparencia.
v
Define el grado de transparencia del color con un valor decimal del 0 al 1.0.
Opacidad
Al contrario que los colores de fondo con RGBA o HSLA, afecta a todos los elementos.
Mezcla colores del contenido de un elemento con los elementos que están detrás.
m
Establece un modo de fusión sobre el contenido de un elemento.
Indica el algoritmo de redimensionado a utilizar.
%auto
El navegador decide el algoritmo de reescalado.
crisp-edges
Usa un algoritmo de escalado que preserva el contraste y bordes de la imagen al reescalar (al ampliar y reducir).
pixelated
Usa el algoritmo de escalado «vecino más próximo» o similar, útil con colores lisos o sólidos (sólo al ampliar).
Aplica una rotación ortogonal sobre imágenes de contenido (no background).
a
Indica el ángulo a de rotación a aplicar.
from-image
Aplica rotación si la imagen la requiere (leyendo los metadatos EXIF).
Indica como rellenará su contenedor un elemento (usando width y height).
%fill
Estira la imagen a los valores proporcionados (comportamiento por defecto).
contain
Ajusta el ancho/alto de la imagen, manteniendo el lado sobrante.
cover
Ajusta el ancho/alto de la imagen, recortando el lado más pequeño.
none
No modifica las dimensiones del objeto, sino que se ajusta al interior del contenedor.
scale-down
Da un tamaño al contenido como con contain o none, pero devolviendo un tamaño más pequeño.
Indica la alineación del contenido de un objeto.
x
1 parámetro. Coloca el objeto en un eje, y centra el otro (o aplica la misma posición a ambos).
x y
2 parámetros. Coloca el objeto horizontalmente y verticalmente.
x
Posición, longitud o porcentaje que coloca el objeto en el eje x (horizontal).
y
Posición, longitud o porcentaje que coloca el objeto en el eje y (vertical).
Indica el comportamiento de los contenidos que no caben en el contenedor.
%visible
El contenido desbordado no es recortado (comportamiento por defecto).
hidden
El contenido desbordado es recortado y no muestra barra de desplazamiento.
scroll
El contenido desbordado es recortado y muestra barra de desplazamiento.
auto
El navegador decide el comportamiento de los elementos desbordados.
Indica el comportamiento de los contenidos desbordados en el eje x (horizontal).
auto
El navegador decide el comportamiento de los elementos desbordados.
%visible
El contenido desbordado no es recortado (comportamiento por defecto).
hidden
El contenido desbordado es recortado y no muestra barra de desplazamiento.
scroll
El contenido desbordado es recortado y muestra barra de desplazamiento.
Indica el comportamiento de los contenidos desbordados en el eje y (vertical).
auto
El navegador decide el comportamiento de los elementos desbordados.
%visible
El contenido desbordado no es recortado (comportamiento por defecto).
hidden
El contenido desbordado es recortado y no muestra barra de desplazamiento.
scroll
El contenido desbordado es recortado y muestra barra de desplazamiento.
Contenido generado
Genera contenido mediante pseudoelementos ::before o ::after.
t
Muestra un texto como contenido generado. Se puede concatenar con espacios.
Dirección URL de la imagen a mostrar.
k
Una palabra clave o función:
none
No genera pseudoelemento.
normal
Establece a none los pseudoelementos ::before y ::after.
open-quote
Muestra la comilla de apertura (ver propiedad quotes).
close-quote
Muestra la comilla de cierre (ver propiedad quotes).
no-open-quote
No utiliza comilla de apertura (ver propiedad quotes).
no-close-quote
No utiliza comilla de cierre (ver propiedad quotes).
attr(a)
Devuelve el valor del atributo HTML especificado.
a
Atributo HTML.
counter(c)
Muestra el contador indicado.
counters(c, s)
Muestra el contador indicado con un estilo especifico.
c
Contador que se mostrará.
s
Estilo de lista utilizada.
none
No muestra ningún signo.
%disc
Muestra un pequeño circulo relleno.
circle
Muestra un pequeño circulo vacío.
square
Muestra un pequeño cuadrado relleno.
decimal
Muestra números decimales (1, 2, 3...).
decimal-leading-zero
Muestra números decimales con cero (01, 02, 03...)
lower-alpha
Muestra letras minúsculas (a, b, c...). Similar a lower-latin.
upper-alpha
Muestra letras mayúsculas (A, B, C...). Similar a upper-latin.
lower-roman
Muestra números romanos en minúsculas (i, ii, iii...).
upper-roman
Muestra números romanos en mayúsculas (I, II, III...).
lower-greek
Muestra letras griegas en minúsculas (α, β, γ...).
armenian
Muestra numeración armenia (Ա, Բ, Գ...).
georgian
Muestra numeración georgiana (ა, ბ, გ...).
Cambia las comillas usadas en «content» con «open-quote» y «close-quote».
c1 c2
Establece las comillas de apertura y cierre. Ej: quotes: '«' '»'
Múltiples
Se pueden indicar múltiples comillas para diferentes niveles de anidamiento.
Inicializa un contador CSS.
c v
Resetea/inicializa un contador (o una lista de ellos).
c
Nombre del contador implicado.
v
Valor al cuál se inicializará el contador. Por defecto, 1.
none
No inicializa el contador.
Múltiples
Se pueden indicar varios contadores, separados por espacios.
Incrementa un contador CSS.
c v
Incrementa el contador (o una lista de ellos).
c
Nombre del contador implicado.
v
Valor que se incrementará el contador. Por defecto, 1.
none
No realiza incremento (útil para retrasar un incremento).
id1 valor
Incrementa uno o varios contadores
Múltiples
Se pueden indicar varios contadores, separados por espacios.
Columnas
Propiedad de resumen (shorthand) para modificar tamaño y conteo de columnas.
Atajo
{column-width} {column-count}
Especifica el ancho de las columnas.
x
Indica la longitud de ancho de las columnas.
%auto
El ancho de las columnas es ajustado automáticamente.
Indica el número de columnas.
n
Indica el número de columnas a utilizar.
%auto
El número de columnas es determinado por otras propiedades.
Propiedad de resumen (shorthand) para modificar los espacios entre columnas.
Atajo
{column-width} {column-style} {column-color}
Indica el ancho del espacio entre columnas.
thin
Grosor fino predefinido.
medium
Grosor medio predefinido.
thick
Grosor ancho predefinido.
Define el estilo de los espacios entre columnas.
%none
Sin estilo (column-rule-width = 0).
solid
Estilo sólido e ininterrumpido.
dotted
Estilo punteado.
dashed
Estilo rayado.
double
Estilo doble (dos líneas).
groove
Estilo 3D interno.
ridge
Estilo 3D externo.
inset
Estilo biselado (hacia dentro).
outset
Estilo biselado (hacia fuera).
Indica el color de los espacios entre columnas.
Define el color concreto utilizando RGB/RGBA, HSL/HSLA o palabras clave.
Establece el ancho del hueco de la columna.
t
Longitud de ancho del hueco de la columna.
%normal
El navegador define el ancho de la columna (aprox. 1em).
Establece si el elemento ocupará todas las columnas o no.
%none
Sin cambios. No se unen columnas.
all
El elemento se extiende a lo largo de todas las columnas.
Define como se rellenan las columnas.
%auto
El navegador rellena las columnas de forma secuencial.
balance
Balancea el contenido de forma que cada columna tenga misma cantidad, si es posible.
Impresión CSS
Manipula la apariencia de un elemento cortado por un salto.
%slice
Muestra el elemento cortado. Comportamiento por defecto.
clone
Clona el elemento, de modo que no aparece cortado, regenera el borde y redibuja el fondo.
Indica comportamiento de un salto antes de un elemento (antes page-break-before).
v
Palabra clave para saltos genéricos:
%auto
Ni fuerza ni prohibe el salto.
avoid
Evita el salto.
always
Fuerza siempre el salto.
any
Fuerza el salto
v
Palabra clave para saltos de página:
avoid-page
Evita un salto de página.
page
Fuerza siempre un salto de página.
left
Fuerza saltos de página hasta conseguir que la siguiente página sea la izquierda.
right
Fuerza saltos de página hasta conseguir que la siguiente página sea la derecha.
recto
Fuerza saltos de página hasta conseguir que la siguiente página sea recto (frontal).
verso
Fuerza saltos de página hasta conseguir que la siguiente página sea verso (posterior).
v
Palabra clave para saltos de columnas:
avoid-column
Evita un salto de columna.
column
Fuerza un salto de columna.
v
Palabra clave para saltos de región:
avoid-region
Evita un salto de región.
region
Fuerza un salto de región.
Indica comportamiento de un salto después de un elemento (antes page-break-after).
v
Palabra clave para saltos genéricos:
%auto
Ni fuerza ni prohibe el salto.
avoid
Evita el salto.
always
Fuerza siempre el salto.
any
Fuerza el salto
v
Palabra clave para saltos de página:
avoid-page
Evita un salto de página.
page
Fuerza siempre un salto de página.
left
Fuerza saltos de página hasta conseguir que la siguiente página sea la izquierda.
right
Fuerza saltos de página hasta conseguir que la siguiente página sea la derecha.
region
Fuerza un salto de región.
verso
Fuerza saltos de página hasta conseguir que la siguiente página sea verso (posterior).
v
Palabra clave para saltos de columnas:
avoid-column
Evita un salto de columna.
column
Fuerza un salto de columna.
v
Palabra clave para saltos de región:
avoid-region
Evita un salto de región.
region
Fuerza un salto de región.
Indica comportamiento de un salto dentro de un elemento (antes page-break-inside).
%auto
Ni fuerza ni prohibe el salto.
avoid
Evita el salto.
avoid-page
Evita un salto de página.
avoid-column
Evita un salto de columna.
avoid-region
Evita un salto de región.
Indica el número mínimo de líneas que deben mantenerse antes de un salto.
n
Número de líneas. Por defecto, 2.
Indica el número mínimo de líneas que deben mantenerse después de un salto.
n
Número de líneas. Por defecto, 2.
Transiciones CSS
Propiedad de resumen (shorthand) para suavizar cambios de estado (transiciones).
Atajo
{transition-property} {transition-duration} {transition-timing-function} {transition-delay}
Propiedades a las que se le aplicará la transición.
p1, p2, ...
Lista de propiedades CSS a la que se le aplicará la transición.
all
Aplicar la transición a todas las propiedades CSS implicadas.
Tiempo de duración de la transición.
t
Indica el tiempo de la transición desde un estado inicial a un estado final.
Función de tiempo que indica la progresión/velocidad de la transición.
f
Especifica la función de tiempo a utilizar en la transición.
Indica un retardo antes de comenzar la transición.
t
Indica cuanto tiempo se demorará la transición antes de comenzar.
Animaciones CSS
Propiedad de resumen (shorthand) para definir animaciones CSS.
Atajo
{animation-name} {animation-duration} {animation-timing-function} {animation-delay} {animation-iteration-count} {animation-direction} {animation-fill-mode} {animation-play-state}
Múltiples
Es posible indicar una lista de animaciones separando por comas, tanto en la propiedad de atajo como en las individuales.
Indica la animación (o una lista de ellas) que se aplicarán al elemento HTML.
a
Nombre de la animación (bloque keyframes) que se aplicará al elemento.
Indica la duración de la animación.
t
Indica el tiempo de duración de la animación.
Función de tiempo que indica la progresión/velocidad de la animación.
f
Especifica la función de tiempo a utilizar en la animación.
Indica un retardo antes de comenzar la animación.
t
Indica cuanto tiempo se demorará la animación antes de comenzar.
Indica el número de veces que se repetirá la animación.
n
Número de repeticiones de la animación. Por defecto, 1.
infinite
Repite la animación indefinidamente.
Define la dirección del transcurso de la animación.
%normal
Orden normal de la animación.
reverse
La animación se reproduce en orden inverso (del último fotograma al primero).
alternate
La animación se reproduce en orden normal y en orden inverso (volviendo al primer fotograma).
alternate-reverse
Idéntico al anterior, pero además en orden inverso.
Indica que estilos se aplicarán cuando la animación finalice.
%none
No realiza ninguna acción de relleno.
backwards
Aplica los estilos del primer fotograma de la animación.
forwards
Aplica los estilos del último fotograma de la animación.
both
Aplica los estilos del primer y último fotograma de la animación.
Cambia el estado actual de la animación (pausada o no).
%running
La animación se encontrará reproduciéndose.
paused
La animación se encontrará pausada.
Filtros CSS
Aplica un filtro CSS especifico sobre el elemento.
grayscale(n)
Convierte a escala de grises.
n
Número o porcentaje (0/0% = sin cambios, 1/100% = gris).
blur(n)
Aplica un desenfoque gaussiano.
n
Longitud de desviación estándar de la función Gaussiana. Valores negativos no permitidos.
sepia(n)
Convierte la imagen en sepia.
n
Número o porcentaje de proporción de la conversión (0/0% = sin cambios, 1/100% = sepia).
saturate(n)
Aplica niveles de saturación.
n
Número o porcentaje de proporción de la conversión (0/0% = desaturado, 1/100% = sin cambios, >1/100% = sobresaturado).
opacity(n)
Convierte a un grado de transparencia.
n
Número o porcentaje de proporción de la conversión (0/0% = transparente, 1/100% = sin cambios).
brightness(n)
Multiplicador lineal para modificar el brillo.
n
Número o porcentaje (0/0% = Negro, 1/100% = sin cambios, >1/100% = Blanco).
contrast(n)
Ajusta el contraste.
n
Número o porcentaje (0/0% = Gris, 1/100% = sin cambios, >1/100% = más contraste).
hue-rotate(a)
Aplica una rotación de matiz de color.
a
[Ángulo] de rotación por la rueda de color (valores entre 0deg y 360deg = sin cambios).
invert(n)
Invierte el color (negativo).
n
Número o porcentaje de proporción de la conversión (0/0% = sin cambios, 1/100% = invertido).
drop-shadow(x y b c)
Aplica una sombra al borde del elemento, respetando transparencias o formas.
x
Longitud de desplazamiento en el eje x (horizontal).
y
Longitud de desplazamiento en el eje y (vertical).
b
Longitud del radio de desenfoque de la sombra.
c
Color de la sombra.
URL(f)
Aplica una referencia a un filtro SVG. Ejemplo: URL(filters.svg#filtro1)
Múltiples
Es posible aplicar múltiples filtros separando por espacios.
Transformaciones CSS
Propiedad de resumen (shorthand) para definir transformaciones CSS.
f
Función de transformación 2D.
rotate(a)
Rotación 2D (sobre un eje definido con transform-origin).
a
[Ángulo] de rotación.
scale(x, y)
Escalado 2D (Aumenta o disminuye un elemento).
scaleX(x)
Escalado 2D que afecta sólo al eje X (horizontal). Equivalente a scale(x, 1).
scaleY(y)
Escalado 2D que afecta sólo al eje y (vertical). Equivalente a scale(1, y).
x
Número que indica el tamaño a escalar en eje X (0.5 = mitad, 1 = sin cambios, 2 = doble...).
y
Número que indica el tamaño a escalar en eje Y (0.5 = mitad, 1 = sin cambios, 2 = doble...).
translate(x, y)
Translación 2D (Desplaza un elemento). Si 1 parámetro, aplica el mismo a los dos.
translateX(x)
Translación 2D que afecta sólo al eje X (horizontal). Equivalente a translate(x, 0).
translateY(y)
Translación 2D que afecta sólo al eje y (vertical). Equivalente a translate(0, y).
x
Número (unidad de usuario) o longitud de desplazamiento en eje X (horizontal).
y
Número (unidad de usuario) o longitud de desplazamiento en eje y (vertical).
skew(a1, a2)
Deformación 2D en base a ángulos en el eje X y el eje Y.
skewX(a1)
Deformación 2D que sólo se aplica al eje X.
skewY(a2)
Deformación 2D que sólo se aplica al eje Y.
a1
[Ángulo] de rotación en el eje X (horizontal).
a2
[Ángulo] de rotación en el eje Y (vertical).
matrix(n1, n2, ...)
Especifica una transformación 2D por matrices (6 valores).
f
Función de transformación 3D.
rotateX(a)
Rotación 3D sobre eje X. Equivalente a rotate3D(1, 0, 0, a).
rotateY(a)
Rotación 3D sobre eje Y. Equivalente a rotate3D(0, 1, 0, a).
rotateZ(a)
Rotación 3D sobre eje Z. Equivalente a rotate3D(0, 0, 1, a) o rotate(a).
a
[Ángulo] de rotación.
translateZ(z)
Translación 3D que afecta sólo al eje Z (profundidad). Equivalente a translate(0, 0, z).
z
Número (unidad de usuario) o longitud de desplazamiento en eje Z (profundidad).
scaleZ(z)
Escalado 3D que afecta sólo al eje Z (profundidad). Equivalente a scale(1, 1, z).
z
Número que indica el tamaño a escalar en el eje Z (0.5 = mitad, 1 = sin cambios, 2 = doble...).
rotate3D(x, y, z, a)
Realiza una rotación 3D usando el vector (x, y, z).
x
Número que indica a que componente se aplica la rotación (eje X).
y
Número que indica a que componente se aplica la rotación (eje Y).
z
Número que indica a que componente se aplica la rotación (eje Z).
a
[Ángulo] de rotación.
scale3D(x, y, z)
Escalado 3D.
x
Número que indica el escalado a realizar sobre el eje X.
y
Número que indica el escalado a realizar sobre el eje Y.
z
Número que indica el escalado a realizar sobre el eje Z.
translate3D(x, y, z)
Translación 3D.
x
Longitud de desplazamiento sobre el eje X.
y
Longitud de desplazamiento sobre el eje Y.
z
Longitud de desplazamiento sobre el eje Z.
perspective(n)
Realiza una proyección perspectiva de una matriz.
n
Longitud de distancia del plano z=0 desde el espectador.
matrix3d(n1, n2, ...)
Especifica una transformación 3D por matrices (16 valores).
Indica los puntos de origen de una transformación.
x
1 parámetro. Establece el mismo punto de origen para el eje X y para el eje Y.
x y
2 parámetros. Establece un punto de origen para cada eje.
x
Longitud, porcentaje o posición del punto de origen del eje X.
y
Longitud, porcentaje o posición del punto de origen del eje Y.
Indica como son renderizados los elementos anidados en el espacio 3D.
flat
Elementos hijos no preservan su posición 3D.
preserve-3d
Elementos hijos preservan su posición 3D.
Define la perspectiva desde el punto de vista del usuario.
%none
No define perspectiva.
t
Longitud de distancia del plazo z=0 desde el espectador.
Establece el punto de origen de la perspectiva.
x
1 parámetro. Establece el mismo punto de origen para el eje X y para el eje Y.
x y
2 parámetros. Establece un punto de origen para cada eje.
x
Longitud, porcentaje o posición del punto de origen del eje X.
y
Longitud, porcentaje o posición del punto de origen del eje Y.
Determina la visibilidad de la parte trasera de un elemento 3D.
%visible
Muestra la parte trasera de un elemento 3D (comportamiento por defecto).
hidden
Oculta la parte trasera de un elemento 3D.
Tipos de datos CSS
Descripción
Colores
Define un color específico.
palabra-clave
Palabra clave que define un color.
transparent
Define el color como 100% transparente.
currentColor
Establece el color que se está utilizando actualmente en el color de texto (útil para SVG).
RGB(r, g, b)
Esquema de color RGB (rojo, verde y azul). Cada canal define la cantidad de un color determinado.
RGBA(r, g, b, a)
Esquema de color RGB con canal alfa. Idem, pero además permite usar un canal alfa.
r
Canal rojo. Define la cantidad de rojo con un valor del 0 al 255. También se pueden usar un porcentaje.
g
Canal verde. Define la cantidad de verde con un valor del 0 al 255. También se pueden usar un porcentaje.
b
Canal azul. Define la cantidad de azul con un valor del 0 al 255. También se pueden usar un porcentaje.
a
Canal alfa. Define el grado de transparencia del color con un valor decimal del 0 al 1.0.
#rrggbb
Esquema de color RGB abreviado.
rr
Canal rojo. Define la cantidad de rojo con un valor en hexadecimal de 00 a FF (16).
gg
Canal verde. Define la cantidad de verde con un valor en hexadecimal de 00 a FF (16).
bb
Canal azul. Define la cantidad de azul con un valor en hexadecimal de 00 a FF (16).
RGB corto
Si cada par #rrggbb tiene los dos valores idénticos, se puede abreviar a #rgb.
HSL(h, s, l)
Esquema de color HSL (matiz, saturación y brillo).
HSLA(h, s, l, a)
Esquema de color HSL con canal alfa. Idem, pero además permite usar un canal alfa.
h
Canal de matiz de color. Define los grados de matiz con un valor del 0 al 360.
s
Canal de saturación de color. Define la cantidad de saturación con un valor del 0 al 100%.
l
Canal de brillo o luminosidad. Define la cantidad de brillo con un valor del 0 al 100%.
a
Canal alfa. Define el grado de transparencia del color con un valor decimal del 0 al 1.0.
Imágenes
Especifica la dirección URL (absoluta o relativa) de una imagen.
URL(i)
Define la localización de la imagen a utilizar.
i
Dirección URL de la imagen a utilizar. Se aceptan tanto URL relativas como absolutas.
PNG
Formato de imagen con compresión sin pérdidas
JPG
Formato de imagen con compresión con pérdidas
GIF
Formato de imagen que soporta animaciones
SVG
Formato de imagen escalable
Aplica un modo de fusión sobre la imagen de fondo, mezclando sus colores.
normal
Desactiva (o no usa) cualquier modo de fusión.
multiply
Modo de fusión Multiplicar.
screen
Modo de fusión Trama.
overlay
Modo de fusión Superponer.
darken
Modo de fusión Oscurecer.
lighten
Modo de fusión Aclarar.
color-dodge
Modo de fusión Sobreexponer.
color-burn
Modo de fusión Subexponer.
hard-light
Modo de fusión Luz intensa.
soft-light
Modo de fusión Luz suave.
difference
Modo de fusión Diferencia.
exclusion
Modo de fusión Exclusión.
hue
Modo de fusión Matiz.
saturation
Modo de fusión Saturación.
color
Modo de fusión Color.
luminosity
Modo de fusión Luminosidad.
Direcciones y posiciones
Especifica una dirección u orientación
dirección
Define la dirección mediante una palabra clave.
to top
Hacia arriba. Equivalente a 0 ó 360deg.
to top right
Hacia arriba a la derecha. Equivalente a 35deg.
to right
Hacia la derecha. Equivalente a 90deg.
to bottom right
Hacia abajo a la derecha. Equivalente a 145deg.
to bottom
Hacia abajo. Equivalente a 180deg.
to bottom left
Hacia abajo a la izquierda. Equivalente a 215deg.
to left
Hacia la izquierda. Equivalente a 270deg.
to top left
Hacia arriba a la izquierda. Equivalente a 325deg.
Especifica una dirección u orientación mediante un ángulo.
xdeg
El ángulo es un valor numérico entre 0 y 360. Ambos extremos son equivalentes.
Especifica una posición concreta.
top
Arriba.
right
Derecha.
bottom
Abajo
left
Izquierda.
center
Centro.
Unidades y medidas
Especifica un tamaño o distancia utilizando unidades relativas o absolutas.
u
Unidades relativas. Dependen de otro parámetro.
xpx
Especifica una longitud utilizando píxels (dependen de la pantalla).
xem
Especifica una longitud utilizando *«M»* (aprox. tamaño de la fuente x2).
xex
Especifica una longitud utilizando *«X»* (aprox. tamaño de la fuente /2).
xvw
Especifica una longitud de ancho que depende del viewport (1vw = 1%).
xvh
Especifica una longitud de alto que depende del viewport (1vw = 1%).
xvmin
Especifica una longitud de xvw o xvh (la que sea más pequeña)
xvmax
Especifica una longitud de xvw o xvh (la que sea más grande)
xch
Especifica una longitud relativa al tamaño de ancho del glifo '0'.
xrem
Especifica una longitud relativa al font-size del primer padre del documento.
u
Unidades absolutas. Utilizar sólo en medios físicos.
xpt
Especifica una longitud utilizando puntos (1pt = 0.35mm).
xmm
Especifica una longitud utilizando milimetros.
xpc
Especifica una longitud utilizando picas (1pc = 4.23mm).
xcm
Especifica una longitud utilizando centímetros (1cm = 10mm).
xin
Especifica una longitud utilizando pulgadas (1in = 25.4mm).
Especifica un tamaño o distancia utilizando porcentajes.
p
Especifica una longitud utilizando porcentajes (depende del padre).
Duración y tiempo
Especifica una cantidad de tiempo (generalmente para duraciones o retardos).
t
Especifica una cantidad y una unidad de tiempo.
ts
Especifica un tiempo de t segundos.
tms
Especifica un tiempo de t milisegundos (1000ms = 1s).
Especifica la velocidad de la transición o animación respecto al tiempo.
f
Especifica una función de tiempo o palabra clave predefinida.
linear
La velocidad siempre es la misma. Equivalente a cubic-bezier(0, 0, 1, 1).
ease
La velocidad es lenta, rápida y lenta. Equivalente a cubic-bezier(0.25, 0.1, 0.25, 1).
ease-in
La velocidad es lenta y luego normal. Equivalente a cubic-bezier(0.42, 0, 1, 1).
ease-out
La velocidad es normal, normal y lenta. Equivalente a cubic-bezier(0, 0, 0.58, 1).
ease-in-out
La velocidad es lenta, normal y lenta. Equivalente a cubic-bezier(0.42, 0, 0.58, 1).
step-start
Equivalente a steps(1, start).
step-end
Equivalente a steps(1, end).
cubic-bezier(x1, y1, x2, y2)
Especifica una curva Bézier personalizada.
x1
Valor numérico decimal de 0.0 a 1.0 del primer punto (P1, horizontal).
y1
Valor numérico decimal superior a 0.0 del primer punto (P1, vertical).
x2
Valor numérico decimal de 0.0 a 1.0 del segundo punto (P2, horizontal).
y2
Valor numérico decimal superior a 0.0 del segundo punto (P2, vertical).
steps(s, p)
Especifica el número de intervalos de la transición o animación.
s
Número de intervalos (para repartir el mismo tiempo a cada uno).
p
Indica si el valor cambia al inicio o al final del intervalo. Opcional. Por defecto, end.

Leyenda

  • Navegador con soporte
  • Navegador con soporte (ojo: prefijos, excepciones...)
  • Navegador con soporte parcial
  • Navegador sin soporte
  • Soporte desconocido