Chuleta CSS (cheat sheet) Nivel avanzado

Chuleta CSS (cheat sheet) Nivel avanzado

A continuación hemos recopilado en una chuleta CSS las propiedades vistas en el tutorial de CSS Avanzado. También puedes ver un resumen de propiedades CSS del curso completo de CSS disponible en Eniun. Esperamos que esta chuleta o Cheat sheet te ayude en el desarrollo de tus proyectos de diseño web.

1. Variables CSS o propiedades personalizadas

:root {
  --principal-color: black; /* Valor personalizado */
  --font: "Arial";
}
.clase {
  background-color: var(--principal-color);
  font-family: var(--font);
}

Ver más sobre variables CSS →

2. Gradientes CSS

Propiedad	Valores	Ejemplo
background	linear-gradient(dirección{to top, to bottom, to left y to right}|ángulo, color, color, color…)	background: linear-gradient(to right, red, orange);
background	linear-gradient(dirección{to top, to bottom, to left y to right}|ángulo, color posición, color posición, color posición…)	background: linear-gradient(to right, red 20%, orange 40%);
background	linear-gradient(color, color, color…)	background: linear-gradient(red, orange);
background	radial-gradient(forma{circle y ellipse}, color, color, color…)	background: radial-gradient(circle, red, orange);
background	radial-gradient(forma{circle y ellipse} posición, color, color, color…)	background: radial-gradient(circle closest-side, red, orange);
background	radial-gradient(forma{circle y ellipse}, color posición, color posición, color posición…)	background: radial-gradient(circle at top left, red 20%, orange 40%);
background	radial-gradient(color, color, color…)	background: radial-gradient(red, orange, blue);
background	radial-gradient(farthest-side, color, color, …)	background: radial-gradient(farthest-side, red, blue);

Ver más sobre gradientes →

3. Transiciones CSS

transition:[propiedad a modificar] [Duración] [Tipo de animación] [Retardo];

Ver más sobre transiciones →

4. Transformaciones CSS

Propiedad	Descripción	Ejemplo
Scale	Se establece con uno o dos valores, que representan la cantidad de escala que se aplica en cada dirección: scale(x) o scale(x,y). Cuando el valor está fuera del rango [-1, 1], el elemento crece a lo largo de esa dimensión. Cuando está dentro del rango el elemento se encoge.	transform: scale(0.5)
Translate	Cambia la posición del elemento hacia la izquierda, derecha, arriba o abajo. La función translate() se establece con uno o dos valores: translate(x) o translate(x,y). Sus valores pueden estar definidos en píxeles, porcentajes,…	transform: translate(10px)
Rotate	Gira o rota los elementos en grados: rotate(v).	transform: rotate(45deg)
Skew	Distorsiona los elementos según el ángulo en grados. La función skew() se establece con uno o dos valores: skew(x) o skew(x,y).	transform: skew(45deg)
Matrix	Mueve o transforma los elementos con precisión de píxel. La función matrix() se establece con seis valores numéricos: matrix(a,b,c,d,x,y). Los dos últimos valores representan la translación y los primeros la transformación lineal.	transform: matrix(0.5, 0.1, 0.5, 1, 10, -2)

La propiedad transform se usa junto con la propiedad transition. Ejemplo:

.caja1{
   -webkit-transition: 1s linear;
   transition: 1s linear;
}
.caja1:hover{
   -webkit-transform: scale(.5);
   transform: scale(.5);
}

Ver más sobre transformaciones →

5. Animaciones CSS

Sintaxis propiedad abreviada:

selector {
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

1. name: Nombre de la regla @keyframes que describe los fotogramas de la animación.
2. duration: Cantidad de tiempo que la animación consume en completar su ciclo. Se expresa en segundos (s) o milisegundos (ms).
3. timing-function: Ritmo de la animación, es decir, cómo se muestran los fotogramas a lo largo del tiempo. Puede ser lineal, ease, ease-in, ease-out, ease-in-out, cubic-bezier, step-start, step-end, steps, etc.
4. delay: Tiempo de espera antes de que la animación comience a ejecutarse. Se expresa en segundos (s) o milisegundos (ms).
5. iteration-count: Número de veces que se repetirá la animación. Puede ser un número entero, infinite para que se repita infinitamente, o un valor específico como 2, 3, etc.
6. direction: Define si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia. Puede ser normal, reverse, alternate, o alternate-reverse.
7. fill-mode: Especifica qué valores tendrán las propiedades después de finalizar la animación. Puede ser none, forwards, backwards, o both.
8. play-state: Permite pausar y reanudar la secuencia de la animación. Puede ser running o paused.

Sintaxis subpropiedades:

selector{
      animation-name: identifier;
      subproperty: value;
}

Las subpropiedades de animation son:

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

Ver más sobre animaciones CSS →

6. Funciones matemáticas en CSS

Función	Descripción	Valores Ejemplo
abs()	Devuelve el valor absoluto de un número	abs(-10) = 10
sin()	Devuelve el seno de un ángulo	sin(45deg) ≈ 0.71
cos()	Devuelve el coseno de un ángulo	cos(60deg) = 0.5
tan()	Devuelve la tangente de un ángulo	tan(30deg) ≈ 0.58
sqrt()	Devuelve la raíz cuadrada de un número	sqrt(16) = 4
pow()	Eleva un número a una potencia	pow(2, 3) = 8
min()	Devuelve el valor mínimo entre dos números	min(10, 5) = 5
max()	Devuelve el valor máximo entre dos números	max(10, 5) = 10
random()	Devuelve un número aleatorio entre 0 y 1	random() ≈ 0.35
floor()	Devuelve el valor entero menor o igual	floor(3.8) = 3
ceil()	Devuelve el valor entero mayor o igual	ceil(3.2) = 4
round()	Devuelve el valor redondeado al entero más cercano	round(3.7) = 4
clamp()	Limita un valor dentro de un rango	clamp(10, 5, 8) = 8
calc()	Realiza cálculos matemáticos en propiedades CSS	width: calc(100% - 20px)
attr()	Obtiene el valor de un atributo HTML y lo utiliza en CSS	content: attr(data-text)

Ver más sobre funciones matemáticas →

7. CSS Grid

Propiedad	Descripción	Valores Ejemplo
display	Define el contenedor como un grid container	grid (por defecto), inline-grid
grid-template-columns	Define las columnas del grid	grid-template-columns: 1fr 2fr 1fr
grid-template-rows	Define las filas del grid	grid-template-rows: 100px 200px
grid-gap	Propiedad abreviada para establecer grid-column-gap y grid-row-gap	grid-gap: 10px
grid-column-gap	Establece el tamaño del espacio entre columnas	grid-column-gap: 20px
grid-row-gap	Establece el tamaño del espacio entre filas	grid-row-gap: 10px

Ver más sobre CSS Grid →

8. CSS Clamp()

propiedad: clamp(valor_mínimo, valor_preferido, valor_máximo);

1. propiedad: Es la propiedad a la que se va a aplicar clamp(). Por ejemplo: font-size para modificar el tamaño de las fuentes.
2. valor_mínimo: Es el tamaño mínimo que se aplicará a la propiedad, independientemente del tamaño de la pantalla o del contenedor. Si el valor preferido es menor que este, se aplicará el valor mínimo.
3. valor_preferido: Es el valor que se aplicará de manera predeterminada a la propiedad. Este valor puede ser relativo, como en el caso de unidades como vw (viewport width) o em, lo que permite que el tamaño del texto se ajuste dinámicamente en función del tamaño de la pantalla.
4. valor_máximo: Es el tamaño máximo que se aplicará a la propiedad. Si el valor preferido es mayor que este, se aplicará el valor máximo.

Ver más sobre CSS Clamp() →

9. CSS line-clamp

.elemento{
    display: -webkit-box;
    -webkit-line-clamp: <numero_de_lineas>;
    -webkit-box-orient: horizontal | vertical;
    overflow: hidden;
}

• display: -webkit-box;: Esta propiedad se utiliza para establecer el tipo de caja de diseño utilizado para el elemento. En este caso, -webkit-box es necesario para compatibilidad con navegadores basados en WebKit, como Safari y Chrome.
• -webkit-line-clamp: <numero_de_lineas>;: Esta es la parte principal de la propiedad line-clamp. Aquí se especifica el número de líneas que se mostrarán antes de truncar el texto. Por ejemplo, si estableces -webkit-line-clamp: 3;, solo se mostrarán las primeras tres líneas del texto y el resto será truncado.
• -webkit-box-orient: vertical;: Esta propiedad se utiliza para establecer la orientación del contenido dentro del contenedor. En el contexto de line-clamp, normalmente se usa vertical para que los elementos de línea se apilen verticalmente dentro del contenedor flexible, permitiendo así la truncación vertical del texto.
• overflow: hidden;: Esta propiedad se utiliza para ocultar el contenido que se desborda del contenedor. Es importante para asegurarse de que el texto truncado no sea visible fuera del área designada.

Ver más sobre CSS line-clamp →

10. CSS Scroll Snap

.contenedor-scroll {
   scroll-snap-type: [x | y | block | inline] [mandatory | proximity];
}
.seccion {
   scroll-snap-align: [start | center | end | none];
}

• La propiedad scroll-snap-type especifica cómo se debe comportar el desplazamiento dentro del contenedor. Puede definir el tipo de desplazamiento en los ejes horizontal (x) o vertical (y), así como también en bloques (block) o en líneas (inline). Además, determina si el desplazamiento debe detenerse obligatoriamente en los puntos de anclaje especificados (mandatory) o si puede detenerse en el punto más cercano (proximity).
• La propiedad scroll-snap-align se aplica a los elementos hijos del contenedor. Esta propiedad determina cómo se alineará cada elemento con respecto al punto de anclaje. Los valores comunes para scroll-snap-align son start, end, center, none, etc. Por ejemplo, scroll-snap-align: start; alinea el inicio del elemento con el punto de anclaje.

Ver más sobre CSS Scroll Snap →

11. CSS scroll-behavior

html{
   scroll-behavior: auto | smooth;
}

• auto: Este es el valor predeterminado. Indica que el desplazamiento será instantáneo, sin transición o animación.
• smooth: Este valor activa el desplazamiento suave, lo que significa que el movimiento entre los diferentes elementos de la página será gradual y animado.

Ver más sobre CSS scroll-behavior →

12. CSS Blend modes

.elemento {
    mix-blend-mode: <modo-de-mezcla>;
}

Blend Mode	Descripción	Características
multiply	Multiplica los colores de la capa superior con los de la capa inferior.	– Oscurece la imagen resultante.
screen	Invierte los colores de la capa superior y los multiplica con los de la capa inferior.	– Aclara las áreas de la imagen.
overlay	Combina Multiply y Screen, oscureciendo o aclarando la capa inferior dependiendo de sus colores.	– Produce un efecto de contraste y saturación.
darken	Conserva los colores más oscuros de las dos capas.	– Selecciona el color más oscuro de cada píxel de ambas capas.
lighten	Conserva los colores más claros de las dos capas.	– Selecciona el color más claro de cada píxel de ambas capas.
color-dodge	Aclara los colores de la capa inferior dependiendo de los colores de la capa superior.	– Aclara las áreas de la imagen de la capa inferior.
color-burn	Oscurece los colores de la capa inferior dependiendo de los colores de la capa superior.	– Oscurece las áreas de la imagen de la capa inferior.
difference	Resta los colores de la capa superior de los de la capa inferior.	– Produce un efecto de inversión de colores.
exclusion	Similar a Difference, pero con una apariencia menos extrema.	– Combina los colores de ambas capas con un efecto de exclusión.
hard-light	Combina Multiply y Screen, pero de una manera más intensa.	– Produce un efecto más fuerte de contraste y saturación.
soft-light	Similar a Overlay, pero con una apariencia más suave.	– Produce un efecto más suave de contraste y saturación.
hue	Preserva el brillo y la saturación de la capa inferior, pero adopta el tono de la capa superior.	– Aplica el tono de la capa superior a la capa inferior.
saturation	Preserva el brillo y el tono de la capa inferior, pero adopta la saturación de la capa superior.	– Aplica la saturación de la capa superior a la capa inferior.
color	Preserva el brillo de la capa inferior, pero adopta el tono y la saturación de la capa superior.	– Aplica el tono y la saturación de la capa superior a la capa inferior.
luminosity	Preserva el tono y la saturación de la capa inferior, pero adopta el brillo de la capa superior.	– Aplica el brillo de la capa superior a la capa inferior.

Ver más sobre CSS Blend modes →

13. CSS Hyphens

.elemento{
    hyphens: auto | manual | none;
}

• auto: El navegador decide dónde dividir las palabras para evitar el desbordamiento del texto. Utiliza las reglas de separación de sílabas del idioma predeterminado del documento o del sistema operativo.
• manual: Las palabras no se dividirán automáticamente. Debes utilizar el carácter de guion (-) para indicar dónde se pueden dividir las palabras manualmente.
• none: Desactiva la división automática y manual de palabras. El texto puede desbordarse si no cabe en el contenedor.

Ver más sobre CSS Hyphens →

14. Filtros CSS

elemento {
  filter: <función-de-filtro>(<valor>) ;
}

Función	Descripción	Valores
blur(<valor>)	Aplica un desenfoque al elemento	<valor> cantidad de desenfoque a aplicar
brightness(<valor>)	Ajusta el brillo del elemento	<valor> 0: completamente oscuro, 1: original
contrast(<valor>)	Ajusta el contraste del elemento	<valor> 0: completamente gris, 1: original
grayscale(<valor>)	Convierte el elemento a escala de grises	<valor> 0: original, 1: escala de grises
hue-rotate(<valor>)	Gira el espectro de colores del elemento	<valor> es la cantidad de grados en sentido horario 0 a 360deg
invert(<valor>)	Invierte los colores del elemento	<valor> 0: original, 1: invertido
opacity(<valor>)	Ajusta la opacidad del elemento	<valor> 0: transparente, 1: original
saturate(<valor>)	Ajusta la saturación del elemento	<valor> 0: grisáceo , 100%: original
sepia(<valor>)	Aplica un tono sepia al elemento	<valor> 0: original, 1: sepia completo

Ver más sobre filtros →

15. Prefijos para los navegadores

Prefijo	Navegador
-moz-	Firefox
-webkit-	Safari y Chrome
-o-	Opera
-khtml-	Konqueror
-ms-	Internet Explorer
-chrome-	Google Chrome

Ver más sobre prefijos →