Fondo de tablero de ajedrez CSS... pero con esquinas redondeadas y estilos de cursor | trucos CSS

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

Al menos eso es lo que pensé mientras miraba el fondo cuadriculado de 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, estaría seguro de obtener el diseño que quería.

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

Comencemos con el modelo básico:

<div></div>

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 esto nos da es un fondo repetitivo de cuadrados que van del rosa al azul. 5px espacios en blanco entre ellos. Cada cuadrado tiene cincuenta píxeles de ancho y es transparente. Esto se crea usando el repeating-linear-gradientque crea una imagen de degradado lineal donde el degradado se repite en toda la región contenedora.

En otras palabras, el primer degradado de esta secuencia crea franjas horizontales blancas, y el segundo degradado crea franjas verticales blancas. En capas, forman el patrón de cuadros escoceses, y el tercer degradado llena el espacio restante.

Ahora agregamos el glifo de estrella que mencioné anteriormente sobre el patrón de fondo. Podemos hacer esto incluyéndolo en el mismo background propiedad como los gradientes mientras usa un SVG codificado para la forma:

div {
  background: 
    repeat left -17px top -22px/55px 55px
    url("data:image/svg+xml,
    <svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 35px 35px'>
      <foreignObject width="35px" height="35px">
        <div xmlns="http://www.w3.org/1999/xhtml" style="color: white; font-size: 35px">✦</div>
      </foreignObject>
    </svg>"
    ), 
    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 esto. La primera palabra clave, repeatsignifica que esta es una imagen de fondo repetitiva. Esto es seguido por 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 el patrón. Verá a continuación cómo se da el tamaño del glifo. El desplazamiento se agrega para cambiar la posición del glifo repetido exactamente sobre cada intersección en el patrón cuadriculado.

SVG tiene HTML <div> teniendo el glifo Fíjate que declaré un font-size en él. En última instancia, esto determina el radio del borde de los cuadrados en el tablero de ajedrez: cuanto más grande es el glifo, más redondeados son los cuadrados. El SVG expandido de la URL de datos se ve así:

<svg xmlns="http://www.w3.org/2000/svg" viewBox='0 0 35px 35px'>
  <foreignObject width="35px" height="35px">
    <div xmlns="http://www.w3.org/1999/xhtml" style="color:white;font-size:35px">✦</div>
  </foreignObject>
</svg>

Ahora que la plantilla CSS está establecida, agreguemos un :hover un efecto en el que se elimina el glifo y las líneas blancas se vuelven ligeramente translúcidas con el uso 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í está! Ahora no solo tenemos esquinas redondeadas, sino que también tenemos más control sobre el modelo para efectos como este:

Nuevamente, todo este ejercicio fue un intento de obtener una cuadrícula de cuadros 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 hace el trabajo bastante bien, pero también tengo curiosidad por saber cómo lo abordarías. ¡Házmelo saber en los comentarios!