Conferencia 3: Colores y fondos en CSS

En esta conferencia, exploraremos cómo usar colores y fondos para hacer que su sitio web sea visualmente atractivo. Comprender cómo aplicar colores y fondos de manera efectiva es clave para crear diseños web atractivos y estéticamente agradables.

Usando colores en CSS

CSS le permite especificar colores de varias maneras, incluido el uso de nombres de colores, valores hexadecimales, RGB, RGBA, HSL y HSLA.

1. Nombres de colores

CSS proporciona una amplia gama de nombres de colores predefinidos.

• Ejemplo:

  h1 {
    color: red;
  }

Esto establecerá el color del texto de todos los elementos

en rojo.

2. Colores hexadecimales

Los códigos hexadecimales son una combinación de seis dígitos de números y letras definidas por su combinación de valores rojo, verde y azul (RGB).

• Ejemplo:

  p {
    color: #3498db; /* A shade of blue */
  }

3. RGB y RGBA

RGB significa rojo, verde y azul. RGBA agrega un canal Alfa para opacidad.

• Ejemplo (RGB):

  div {
    color: rgb(255, 99, 71); /* Tomato color */
  }

• Ejemplo (RGBA):

  div {
    background-color: rgba(255, 99, 71, 0.5); /* Semi-transparent tomato color */
  }

4. HSL y HSLA

HSL significa Tono, Saturación y Luminosidad. HSLA incluye un canal Alfa.

• Ejemplo (HSL):

  h2 {
    color: hsl(120, 100%, 50%); /* Pure green */
  }

• Ejemplo (HSLA):

  h2 {
    color: hsla(120, 100%, 50%, 0.5); /* Semi-transparent green */
  }

Aplicar fondos

Los fondos en CSS pueden mejorar el diseño agregando color, imágenes, degradados y más a los elementos.

1. Color de fondo

Puedes establecer el color de fondo de cualquier elemento HTML usando la propiedad background-color.

• Ejemplo:

  body {
    background-color: #f4f4f4; /* Light gray background */
  }

2. Imágenes de fondo

CSS te permite usar imágenes como fondo.

• Ejemplo:

  .banner {
    background-image: url('banner.jpg');
    background-size: cover;
    background-position: center;
  }

Esto establecerá una imagen de fondo en un elemento con el banner de clase. La imagen cubrirá toda el área y estará centrada.

3. Repetición de fondo

Controla si una imagen de fondo se repite horizontalmente, verticalmente o no se repite.

• Ejemplo:

  .tile {
    background-image: url('tile.png');
    background-repeat: repeat; /* Repeats both horizontally and vertically */
  }

4. Posición de fondo

Puedes controlar la posición inicial de la imagen de fondo.

• Ejemplo:

  .header {
    background-image: url('header.jpg');
    background-position: top right;
  }

5. Degradado de fondo

Los degradados te permiten crear transiciones suaves entre dos o más colores.

• Ejemplo (Gradiente lineal):

  .gradient-box {
    background: linear-gradient(to right, #ff7e5f, #feb47b); /* Gradient from left to right */
  }

• Ejemplo (Gradiente radial):

  .circle-gradient {
    background: radial-gradient(circle, #ff7e5f, #feb47b); /* Circular gradient */
  }

Ejemplo práctico:

Pongamos en práctica estos conceptos con un ejemplo que utiliza colores, una imagen de fondo y un degradado.

HTML:

  
Welcome to My Website
  
This is a simple example of using colors and backgrounds in CSS.

CSS:

/* Background color */
body {
  background-color: #f4f4f4;
}

/* Text color */
h1 {
  color: #2c3e50;
}

/* Background image with gradient overlay */
.content {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg');
  background-size: cover;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Text color for paragraph */
p {
  color: #ecf0f1;
}

En este ejemplo:

• El cuerpo tiene un color de fondo gris claro.
• El texto

  es azul oscuro.

• El .content div tiene una imagen de fondo con una superposición de degradado oscuro, lo que hace que el texto blanco se destaque.
• El texto

  tiene un tono claro para complementar el fondo.

Ejercicio de práctica

1. Crea una página web que incluya encabezados, párrafos y divs.
2. Experimente con diferentes formatos de color (hexadecimal, RGB, HSL) para diseñar texto y fondos.
3. Aplica una imagen de fondo a una sección y juega con su posición, tamaño y propiedades de repetición.
4. Crea una sección con un fondo degradado lineal o radial.

Siguiente paso: En la próxima conferencia, cubriremos Tipografía y estilo de fuente en CSS, donde aprenderá cómo elegir y personalizar fuentes para mejorar la legibilidad de su sitio web. y apelación. ¡Nos vemos allí!