Revelar tablero de ajedrez

Cuando tenía 10 años, recuerdo que mi prima visitó nuestra casa. Era (y sigue siendo ) un chico genial, de esos que traen su propio juego de ajedrez autoprogramado en un disquete. Y su versión del ajedrez era tan genial como él porque una pieza del tablero desaparecía después de cada movimiento.

¿Aún más genial? Cada pieza que desaparecía del tablero de juego revelaba una imagen bastante ingeniosa.

Pensé que ese mismo tipo de idea daría lugar a una interfaz de usuario bastante ingeniosa. Excepto que tal vez, en lugar de requerir la interacción del usuario para revelar el fondo, podría simplemente reproducirse como una animación. Aquí es donde aterricé:

La idea es bastante simple y hay muchas otras formas de hacerlo, pero aquí está el rastro del conejo que sigue…

Primero, cree algunas marcas.

La imagen se puede manejar como fondo en CSS en el body, o como algo divque esté diseñado para tener un tamaño específico. Así que no hay necesidad de lidiar con eso todavía.

Pero el tablero de ajedrez es interesante. Ese es un patrón que tiene CSS Grid escrito por todas partes, así que elegí un elemento para que actúe como un contenedor de cuadrícula con un montón de otros divelementos dentro de él. No sé cuántas fichas/cuadrados/lo que sea que tenga un tablero de ajedrez legítimo, así que simplemente elegí el número siete de la nada y lo elevado al cuadrado para obtener 49 cuadrados en total.

div  div/div  !-- etc. --  div/div/div

Sí, escribir todos esos divs es una molestia y JavaScript ciertamente podría ayudar. Pero si solo estoy experimentando y solo necesito la conveniencia del desarrollador, entonces ahí es donde usar Haml puede ayudar:

.grid  - 49.times do    %div

Al final todo sale igual. De cualquier manera, ¡eso me dio todo el marcado que necesitaba para comenzar a diseñar!

Configurar la imagen de fondo

Nuevamente, esto puede suceder como un background-imageelemento bodyo algún otro elemento, dependiendo de cómo se use, siempre y cuando cubra todo el espacio. Como de todos los modos necesitaban un contenedor de cuadrícula, decidí usarlo.

.checkerboard {  background-image: url('walrus.jpg');  background-size: cover;  /* Might need other properties to position the image just right */}

El degradado es parte del archivo de imagen rasterizada, pero podría haber sido inteligente con algún tipo de superposición usando bodyun pseudoelemento, como :after. Diablos, esa es una técnica ampliamente utilizada aquí en el diseño actual de CSS-Tricks.

Diseñar la cuadrícula

Y sí, elige CSS Grid. Hacer una cuadrícula de 7 × 7 es bastante fácil de esa manera.

.checkerboard {  background-image: url('walrus.jpg');  background-size: cover;  display: grid;  grid-template-columns: repeat(7, 1fr);  grid-template-rows: repeat(7, 1fr);}   

Me imagino que esto será mucho mejor una vez que lo veamos aspect-ratioampliamente respaldado, al menos si lo entiendo correctamente. El problema que tengo ahora es que la cuadrícula no se mantiene en ningún tipo de proporción. Eso significa que los mosaicos del tablero de ajedrez se vuelven blandos y similares en diferentes tamaños de ventana gráfica. Abucheo. Mientras tanto, hay pequeñas cosas ingeniosas que podemos hacer, si eso es muy importante, pero decidí dejarlo como está.

Diseñar los azulejos

Se alternan entre el blanco y un tono de gris oscuro, así:

.checkerboard  div {  background-color: #fff;}.checkerboard  div:nth-child(even) {  background-color: #2f2f2f;}

Lo creas o no, ¡nuestro marcado y estilo están listos! Lo único que queda es…

Animando los mosaicos

Todo lo que la animación debe hacer es realizar la transición de cada mosaico de opacity: 1;a otro opacity: 0;y las animaciones CSS son perfectas para eso.

@keyframes poof {  to {    opacity: 0;  }}

¡Excelente! ¡Ni siquiera necesité establecer un fotograma clave inicial! Todo lo que tenía que hacer era llamar la animación en los mosaicos.

.checkerboard  div {  animation-name: poof;  animation-duration: 0.25s;  animation-fill-mode: forwards;  background: #fff;}   

Sí, podría haber usado la animationpropiedad abreviada aquí, pero a menudo me resulta más fácil dividir sus propiedades constituyentes individualmente porque... bueno, hay tantas de ellas y las cosas se vuelven difíciles de leer e identificar en una sola línea.

Si se pregunta por qué animation-fill-modees necesario aquí, es porque evita que la animación regrese al inicio cuando se establece en forwards. En otras palabras, cada mosaico permanecerá allí opacity: 0;cuando finalice la animación en lugar de volver a aparecer.

Realmente quería hacer algo inteligente e inteligente para escalonar los animation-delaymosaicos, pero choqué con un montón de paredes y finalmente decidí abandonar mi esfuerzo de usar 100% CSS básico por un poco de SCSS ligero. De esa manera, podría recorrer todos los mosaicos y compensar la animación de cada uno con una función bastante estándar. Entonces, ¡perdón por el cambio abrupto! Eso fue sólo una parte del viaje.

$columns: 7;$rows: 7;$cells: $columns * $rows;@for $i from 1 through $cells {  .checkerboard  div:nth-child(#{$i}) {    animation-delay: (random($cells) / $columns) + s;  }}

Analicemos eso:

• Hay variables para el número de columnas de la cuadrícula ( $columns), filas de la cuadrícula ( $rows) y número total de celdas ( $cells). Ese último es el producto de multiplicar los dos primeros. Si sabemos que siempre estamos trabajando con una cuadrícula que es un cuadrado perfecto, entonces podríamos refactorizarla un poco para calcular el número de celdas con exponentes.
• Luego, por cada instancia de celdas entre 1y el número total de $cells(que es 49 en este caso), cada mosaico individual obtiene un valor animation-delaysegún su :nth-child()valor. Entonces, el primer mosaico es div:nth-child(1), luego div:nth-child(2)y así sucesivamente. Vea el CSS compilado en la demostración y verá cómo se desarrolla todo.

.checkerboard  div:nth-child(1) {}.checkerboard  div:nth-child(2) {}/* etc. */

• Finalmente, animation-delayes un cálculo que toma un número aleatorio entre 1y el número total de $cells, dividido por el número de $columnscon segundos añadidos al valor. ¿Es esta la mejor manera de hacerlo? No se. Todo se reduce a jugar un poco con las cosas y llegar a algo que te parezca "correcto". Esto me pareció "correcto".

Realmente quería ser creativo y usar Propiedades personalizadas de CSS en lugar de recurrir a SCSS. Me gusta que las propiedades y valores personalizados se puedan actualizar en el lado del cliente, a diferencia de SCSS, donde los valores calculados se compilan durante la compilación y permanecen así. Nuevamente, aquí es exactamente donde estaría muy tentado a recurrir a JavaScript. Pero hice mi cama y tengo que acostarme en ella.

Si echaste un vistazo al CSS compilado anteriormente, habrías visto los valores calculados:

/* Yes, Autoprefixer is in there... */.checkerboard  div:nth-child(1) {  -webkit-animation-delay: 4.5714285714s;          animation-delay: 4.5714285714s;}.checkerboard  div:nth-child(2) {  -webkit-animation-delay: 5.2857142857s;          animation-delay: 5.2857142857s;}.checkerboard  div:nth-child(3) {  -webkit-animation-delay: 2.7142857143s;          animation-delay: 2.7142857143s;}.checkerboard  div:nth-child(4) {  -webkit-animation-delay: 1.5714285714s;          animation-delay: 1.5714285714s;}

Hmm, tal vez esa animación debería ser opcional...

Algunas personas son sensibles al movimiento y al movimiento, por lo que probablemente sea una buena idea cambiar las cosas para que los mosaicos solo tengan estilo y animación si, y solo si, el usuario lo prefiere. ¡Tenemos una consulta de medios para eso!

@media screen and (prefers-reduced-motion: no-preference) {  .checkerboard  div {    animation-name: poof;    animation-duration: 0.25s;    animation-fill-mode: forwards;    background: #fff;  }  .checkerboard  div:nth-child(even) {    background: #2f2f2f;  }}

¡Ahí tienes!

Aquí está esa demostración una vez más: