Colores y Fondos

Los colores son el alma del diseño. Con CSS, puedes cambiar el color del texto, los fondos, los bordes... ¡Todo! Aprenderás a usar colores de múltiples formas: nombres, hexadecimal, RGB, y más.

1. Formas de Especificar Colores

En CSS, hay varias formas de definir un color. Todas funcionan igual, elige la que prefieras.

p {
  color: red;
  background-color: lightblue;
}

p {
  color: #FF0000; /* Rojo */
  background-color: #00FF00; /* Verde */
}

p {
  color: rgb(255, 0, 0); /* Rojo */
  background-color: rgb(0, 255, 0); /* Verde */
}

p {
  color: rgba(255, 0, 0, 0.5); /* Rojo semi-transparente */
  background-color: rgba(0, 0, 255, 0.8); /* Azul 80% opaco */
}

p {
  color: hsl(0, 100%, 50%); /* Rojo */
  background-color: hsl(120, 100%, 50%); /* Verde */
}

2. Color del Texto

Usa la propiedad color para cambiar el color del texto.

h1 {
  color: #FF6B6B;
}

p {
  color: rgb(50, 50, 50);
}

a {
  color: #00BFFF;
}

3. Color de Fondo

Usa background-color para cambiar el fondo de un elemento.

body {
  background-color: #1a1a1a; /* Fondo oscuro */
}

div {
  background-color: rgba(255, 255, 255, 0.1); /* Fondo blanco semi-transparente */
}

.destacado {
  background-color: yellow;
}

4. Fondos con Imágenes

Usa background-image para establecer una imagen como fondo.

div {
  background-image: url('imagen.jpg');
  background-size: cover; /* Cubre todo el elemento */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* No repite la imagen */
}

5. Gradientes

Los gradientes son transiciones suaves entre colores. Muy usados en diseño moderno.

/* Gradiente lineal */
div {
  background: linear-gradient(to right, red, yellow);
}

/* Gradiente diagonal */
div {
  background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
}

/* Gradiente radial */
div {
  background: radial-gradient(circle, yellow, red);
}

/* De arriba a abajo */
background: linear-gradient(to bottom, blue, green);

/* Con múltiples colores */
background: linear-gradient(to right, red, yellow, green, blue);

/* Con porcentajes */
background: linear-gradient(90deg, red 0%, yellow 50%, green 100%);

6. Opacidad (Transparencia)

Usa opacity para hacer un elemento más o menos transparente (0-1).

img {
  opacity: 0.5; /* 50% transparente */
}

div {
  opacity: 0.8; /* 80% opaco */
}

a:hover {
  opacity: 1; /* 100% opaco al pasar el mouse */
}