Checkerboard Reveal

I still remember when I was ten years old, my cousin came to visit my house. He is (still) a cool kid, the kind of kid who will carry a chess game disc that he programmed himself. His version of chess is as cool as he himself, because part of the board disappears after every step.

What's more cool? Every piece that disappears on the board will show a very beautiful picture.

I think the same idea can make some really cool user interfaces. It's just that maybe no user interaction is required to display the background, it can be played simply as an animation. This is my final result:

This idea is simple, and there are many other ways to achieve it, but this is the idea I followed...

First, I created some tags

Images can be processed as background in CSS on body elements, or some designed to be of a specific size<div> on the element. Therefore, this problem is not necessary for the time being. But the board is fun. This is a pattern with the words CSS Grid written on it, so I used an element as a grid container with lots of other ones inside<code><div> element. I don't know how many squares/squares/whatever there is for a legal chess board, so I just chose the number 7 out of thin air and then squared it to get 49 squares.<pre class="brush:php;toolbar:false">&lt;div&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt;</pre> <p>Yes, write all of this<code><div> Elements are painful, and JavaScript can certainly help. But if I'm just experimenting and just need the convenience of the developer, using Haml can help:<pre class="brush:php;toolbar:false"> .grid - 49.times do %div</pre> <p> The final result is the same. Either way, this gave me all the markings I needed to start a styling design!</p> <h2 id="Set-background-image"> Set background image</h2> <p> Again, this can happen as <code>background-image on body or other element, depending on how it is used - as long as it covers the entire space. Since I need a grid container anyway, I decided to use it.

 .checkerboard {
  background-image: url('walrus.jpg');
  background-size: cover;
  /* Other properties may be required to correctly locate the image*/
}

Gradients are part of the raster image file, but I can handle it cleverly with some kind of overlay on body element, using pseudo-elements, such as :after . Alas, this is exactly the common technology currently designed by CSS-Tricks.

Style grid

Yes, I used CSS Grid. Making a 7×7 grid is very easy.

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

I think it will be much better once we see aspect-ratio is widely supported, at least if I understand it correctly. My problem now is that the grid is not maintaining any proportions. This means that the chessboard blocks will become very squeezed at different viewport sizes. not good. If this is very important, we can do some small tricks during this period, but I decided to keep it as it is.

Style Squares

They alternate between white and dark grey, so:

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

Believe it or not, our marks and styles are done! The rest is...

Animation squares

All the animations need to do is convert each square from opacity: 1; to opacity: 0; , and the CSS animation is perfect for this.

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

marvelous! I don't even need to set the start keyframe! All I have to do is call the animation on the square.

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

Yes, I could have used animation abbreviation properties here, but I often find it easier to separate its constituent properties separately because...well, they are too many and it's hard to read and recognize in a single line.

If you're wondering why animation-fill-mode is needed here, it's because it prevents the animation from looping back to the beginning of the animation when set to forwards . In other words, when the animation is over, each square will remain opacity: 0; instead of reappearing.

I really wanted to do something clever to interleave animation-delay of the blocks, but I ran into some obstacles and finally decided to give up my efforts to use 100% native CSS and switch to some lightweight SCSS. This way I can iterate through all the squares and use a fairly standard function to draw the partially shifted for each square. So, sorry for switching suddenly! That's just part of the journey.

 $columns: 7;
$rows: 7;
$cells: $columns * $rows;

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

Let's break it down:

• Variables with the number of grid columns ( $columns ), the number of grid rows ( $rows ) and the total number of cells ( $cells ). The last one is the product of the first two multiplied together. If we know that we always work in a perfect square grid, then we can do some refactoring it, using an exponent to calculate the number of cells.
• Then for each cell instance between 1 and $cells total (49 in this case), each individual square will get an animation-delay based on its :nth-child() value. So the first square is div:nth-child(1) , then div:nth-child(2) , and so on. Check out the compiled CSS in the demo and you will see how it expands all.

 /* Yes, Autoprefixer is in there... */
.checkerboard > div:nth-child(1) {}
.checkerboard > div:nth-child(2) {}
/* etc. */

• Finally, animation-delay is a calculation that takes a random number between 1 and the total number of $cells , divides by the number of $columns , and appends the seconds after the value. Is this the best way? I have no idea. It comes down to playing around with something and finding something that feels “right” to you. This feels "right" to me.

I really want to get creative and customize properties with CSS instead of resorting to SCSS. I like that custom properties and values ​​can be updated on the client side, while the values ​​calculated in SCSS are compiled and left unchanged at build time. Again, this is exactly where I really want to switch to JavaScript. However, I had already prepared the bed and could only sleep on it.

If you looked at the compiled CSS earlier, you will see the calculated value:

 .checkerboard > div:nth-child(1) {
  animation-delay: 4.5714285714s;
}

.checkerboard > div:nth-child(2) {
  animation-delay: 5.2857142857s;
}

.checkerboard > div:nth-child(3) {
  animation-delay: 2.7142857143s;
}

.checkerboard > div:nth-child(4) {
  animation-delay: 1.5714285714s;
}

Well, maybe the animation should be optional...

Some people are sensitive to motion and movement, so it is best to change the settings so that the styling and animation of the squares are only set if the user likes it. We have a media query to achieve this!

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

that's all!