Por un lado, crear fondos de cuadros simples con CSS es fácil. Sin embargo, por otro lado, a menos que seamos uno de los ninjas de gradiente CSS, estamos un poco atascados con patrones básicos.

Al menos eso es lo que pensé mientras miraba el fondo a cuadros en mi pantalla y trataba de redondear un poco las esquinas de los cuadrados... hasta que recordé mi glifo de viñetas favorito: ✦ — y pensé que si pudiera colocarlo sobre cada intersección en el patrón, seguramente obtendría el diseño que quiero.

¡Resulta que es posible! Aquí está la prueba.

Comencemos con el patrón básico:

div {
 background: 
  repeating-linear-gradient(
    to right, transparent, 
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  repeating-linear-gradient(
    to bottom, transparent,  
    transparent 50px, 
    white 50px, 
    white 55px
  ),
  linear-gradient(45deg, pink, skyblue);
  /* more styles */
}

Lo que nos da es un fondo repetitivo de cuadrados que van del rosa al azul con 5px espacios blancos entre ellos. Cada cuadrado tiene cincuenta píxeles de ancho y es transparente. Esto se crea usando repeating-linear-gradient, que crea una imagen de degradado lineal donde el degradado se repite en toda el área contenedora.

En otras palabras, el primer degradado de esa secuencia crea franjas horizontales blancas y el segundo degradado crea franjas verticales blancas. Juntas en capas, forman el patrón a cuadros, y el tercer degradado llena el resto del espacio.

Ahora agregamos el glifo de estrella que mencioné anteriormente, encima del patrón de fondo. Podemos hacerlo incluyéndolo en el mismo background propiedad como los degradados al usar un SVG codificado para la forma:

div {
  background: 
    repeat left -17px top -22px/55px 55px
    url("data:image/svg+xml,
    
      
        
✦
      
    "
    ), 
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      white 50px,
      white 55px
    ),
    linear-gradient(45deg, pink, skyblue);
  /* more style */
}

Analicemos eso. La primera palabra clave, repeat, indica que se trata de una imagen de fondo repetitiva. Seguido de eso está la posición y el tamaño de cada unidad repetitiva, respectivamente (left -17px top -22px/55px 55px). Esta posición de desplazamiento se basa en el tamaño del glifo y del patrón. Verá a continuación cómo se da el tamaño del glifo. El desplazamiento se agrega para volver a colocar el glifo repetido exactamente sobre cada intersección en el patrón cuadriculado.

El SVG tiene un HTML

llevando el glifo. Note que declaré un font-size en eso. Eso determina en última instancia el radio del borde de los cuadrados en el patrón de tablero de ajedrez: cuanto más grande es el glifo, más redondeados son los cuadrados. El SVG desenrollado de la URL de datos se ve así:

  
    
✦
  

Ahora que se ha establecido un patrón CSS, agreguemos un :hover efecto donde se elimina el glifo y las líneas blancas se vuelven ligeramente translúcidas usando rgb() valores de color con transparencia alfa.

div:hover {
  background:
    repeating-linear-gradient(
      to right, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
    repeating-linear-gradient(
      to bottom, transparent,
      transparent 50px,
      rgb(255 255 255 / 0.5) 50px,
      rgb(255 255 255 / 0.5) 55px
    ),
  linear-gradient(45deg, pink, skyblue);
  box-shadow: 10px 10px 20px pink;
}

¡Aquí vamos! Ahora, no solo tenemos nuestras esquinas redondeadas, sino que también tenemos más control sobre el patrón para efectos como este:

Nuevamente, todo este ejercicio fue un intento de obtener una cuadrícula de cuadrados en un patrón de tablero de ajedrez que admite esquinas redondeadas, un degradado de fondo que sirve como una superposición en el patrón y estilos interactivos. Creo que esto cumple la tarea bastante bien, pero también estoy interesado en cómo podrías haberlo abordado. ¡Házmelo saber en los comentarios!