Crea impresionantes fondos de tablero de ajedrez con CSS

Introducción

En este laboratorio, exploraremos la programación CSS para crear un patrón de fondo de tablero de ajedrez. Aprenderás cómo utilizar técnicas de degradado CSS para diseñar un patrón de tablero de ajedrez visualmente atractivo que puede mejorar diversos proyectos web. El patrón de tablero de ajedrez es un elemento de diseño clásico que consiste en cuadrados de colores alternados dispuestos en una cuadrícula, similar a un tablero de ajedrez.

Al completar este laboratorio, adquirirás experiencia práctica con fondos CSS, degradados y creación de patrones, habilidades que son valiosas para el diseño web moderno.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel intermedio con una tasa de finalización del 80%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Comprender los archivos del proyecto

Antes de comenzar a crear nuestro patrón de tablero de ajedrez, examinemos los archivos del proyecto que se han proporcionado en la máquina virtual (VM).

Abre el archivo index.html en el editor haciendo clic en él en el panel del explorador de archivos.

El archivo HTML inicial debería verse así:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- You will add your code here -->
  </body>
</html>

Ahora abre el archivo style.css en el editor.

El archivo CSS inicial debería estar vacío o contener estilos mínimos:

/* CSS styles will be added here */

Comencemos nuestro servidor de desarrollo para ver el estado inicial de nuestra página web.

Para ver tu página web en el navegador, haz clic en el botón "Go Live" en la esquina inferior derecha del editor. Esto iniciará un servidor en vivo y mostrará tu página web en la pestaña Web 8080.

En este momento, deberías ver una página en blanco, ya que aún no hemos agregado ningún contenido o estilos.

Crear la estructura HTML

Ahora que comprendemos los archivos de nuestro proyecto, creemos la estructura HTML para nuestro patrón de tablero de ajedrez.

Abre nuevamente el archivo index.html en el editor.
Necesitamos agregar un elemento contenedor para nuestro patrón de tablero de ajedrez. Dentro de la etiqueta <body>, reemplaza el comentario con un elemento <div> que tenga una clase de "checkerboard":

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Checkerboard Pattern</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="checkerboard"></div>
  </body>
</html>

Guarda el archivo index.html presionando Ctrl+S o haciendo clic en Archivo > Guardar.
Ahora, agreguemos algunos estilos CSS básicos para definir las dimensiones de nuestro tablero de ajedrez. Abre el archivo style.css y agrega el siguiente código:

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
}

Este código CSS hace lo siguiente:

Establece el ancho y la altura de nuestro tablero de ajedrez en 240 píxeles.
Establece el color de fondo en blanco (#fff).

Guarda el archivo style.css.
Refresca la pestaña Web 8080 para ver los cambios.

Ahora deberías ver un cuadrado blanco con un ancho y una altura de 240 píxeles. Este será el lienzo para nuestro patrón de tablero de ajedrez.

Crear el primer gradiente

Ahora comenzaremos a crear nuestro patrón de tablero de ajedrez utilizando gradientes CSS. Vamos a agregar el primer gradiente lineal para crear parte del patrón.

Comprender los gradientes lineales CSS

Los gradientes lineales CSS te permiten crear transiciones suaves entre dos o más colores en una línea recta. La función linear-gradient() toma un ángulo y una serie de puntos de parada de color como parámetros. Utilizaremos esta técnica para crear los cuadrados de nuestro tablero de ajedrez.

Sigue estos pasos:

Abre el archivo style.css.
Modifiquemos nuestra clase .checkerboard para incluir el primer gradiente lineal:

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image: linear-gradient(
    45deg,
    #000 25%,
    transparent 25%,
    transparent 75%,
    #000 75%,
    #000
  );
  background-size: 60px 60px;
}

Permíteme explicar lo que hace este gradiente:

45deg especifica el ángulo del gradiente.
#000 25% crea un color negro desde el 0% hasta el 25% del espacio disponible.
transparent 25% crea un color transparente a partir del 25%.
transparent 75% mantiene el color transparente hasta el 75%.
#000 75% vuelve a cambiar a negro en el 75% y continúa hasta el final.
background-size: 60px 60px establece el tamaño de cada celda de gradiente repetida.

Guarda el archivo style.css.
Refresca la pestaña Web 8080 para ver los cambios.

Ahora deberías ver un patrón comenzando a formarse, pero aún no es un tablero de ajedrez completo. El primer gradiente crea solo una parte del patrón. En el siguiente paso, agregaremos un segundo gradiente para completar el tablero de ajedrez.

Completar el patrón de tablero de ajedrez

Ahora agreguemos el segundo gradiente lineal para completar nuestro patrón de tablero de ajedrez y hacerlo repetible en todo el elemento.

Abre nuevamente el archivo style.css.
Modifica la clase .checkerboard para incluir un segundo gradiente lineal que creará el patrón alternado:

.checkerboard {
  width: 240px;
  height: 240px;
  background-color: #fff;
  background-image:
    linear-gradient(
      45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    ),
    linear-gradient(
      -45deg,
      #000 25%,
      transparent 25%,
      transparent 75%,
      #000 75%,
      #000
    );
  background-size: 60px 60px;
  background-repeat: repeat;
}

Lo que hemos agregado:

Un segundo linear-gradient() que es similar al primero pero con un ángulo de -45deg para crear el patrón alternado.
La propiedad background-repeat: repeat asegura que los patrones se repitan en todo el elemento.

La combinación de estos dos gradientes en diferentes ángulos crea el clásico patrón de tablero de ajedrez. El primer gradiente crea un conjunto de cuadrados diagonales, mientras que el segundo gradiente crea otro conjunto que llena los espacios en blanco.

Guarda el archivo style.css.
Refresca la pestaña Web 8080 para ver el resultado final.

Ahora deberías ver un patrón de tablero de ajedrez completo con cuadrados alternados de color negro y blanco. El patrón debe repetirse en todo el elemento de 240px por 240px.

Cómo funciona el patrón

El efecto de tablero de ajedrez se crea mediante:

Utilizar dos gradientes lineales con ángulos opuestos (45deg y -45deg).
Cada gradiente crea un patrón de cuadrados negros en las esquinas.
Las áreas transparentes permiten que se vea el fondo blanco.
La propiedad background-size controla el tamaño de cada cuadrado en el patrón.
La propiedad background-repeat hace que el patrón se repita en todo el elemento.

Esta técnica demuestra el poder de los gradientes CSS para crear patrones complejos sin necesidad de archivos de imagen, lo que resulta en tiempos de carga más rápidos y una mejor escalabilidad.

Resumen

Felicidades por completar el laboratorio (lab) de Patrón de Fondo de Tablero de Ajedrez. En este laboratorio, has:

Creado una estructura HTML para alojar tu patrón de tablero de ajedrez.
Aprendido cómo usar gradientes lineales CSS para crear patrones.
Combinado múltiples gradientes en diferentes ángulos para crear un efecto de tablero de ajedrez.
Aplicado propiedades de tamaño y repetición para perfeccionar el patrón.

Este patrón de tablero de ajedrez demuestra una poderosa técnica de CSS que se puede aplicar a muchos proyectos de diseño web. El enfoque que has aprendido - usar gradientes en lugar de imágenes - da como resultado tiempos de carga más rápidos y una mejor escalabilidad para tus páginas web.

Ahora puedes utilizar este conocimiento para crear otros patrones y efectos visuales utilizando gradientes CSS. Podrías considerar experimentar con:

Diferentes colores para el tablero de ajedrez.
Cambiar el tamaño de los cuadrados.
Usar diferentes ángulos para los gradientes.
Crear otros patrones geométricos como rayas o puntos.

Las técnicas que has aprendido en este laboratorio proporcionan una base para crear patrones de fondo sofisticados con CSS puro.

Patrón de fondo de tablero de ajedrez