This css sets the tile size, and creates some variables that will be used later. This css displays the background color.
.tile {
position: relative;
/* Creates variables for the tile that can */
/* be set later using inline styling or with a class*/
--fgColor: red;
--bgColor: blue;
--size: 108px;
/* Creates mask variable */
--mask: url("/images/tiles/default.png");
/* Sets the css properties according to the
values of the variables that were written in the styling */
background-color: var(--bgColor);
width: var(--size);
height: var(--size);
}
This draws another layer right on top of the tile. The layer color is set using its css property "background-color". Note that this is different than the "--bgColor" variable we created earlier. In this case, "background-color" is just the way that we are coloring the foreground color. After the color is set, we use the -webkit-mask-image property to give it the role of being the tile's mask. Note that this is different than the "--masl" variable we created earlier. This is the actual css property. --mask will be used later to access and change this property.
.tile::before {
content: "";
position: absolute;
inset: 0;
/* The background color of the mask layer
functions as the FORGROUND color of the tile*/
background-color: var(--fgColor);
/* sets up the layer as a mask.
What shape? the tiles inline styling
will set this property using --mask later. */
-webkit-mask-image: var(--mask);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-image: var(--mask);
mask-repeat: no-repeat;
mask-size: contain;
}
You can also preset all the styles of a tile into a class.
.tile.mountain {
--mask: url("/images/tiles/mountain.png");
--size: 216px;
--fgColor: var(--copper);
--bgColor: black;
}
To draw this...
All I need to type now is this...
<div class="tile mountain"></div>
Here's a test setting the size of the mountain to fill its container
<div class="tile mountain" style="--size: 100%"></div>
here's a test of 3 tiles in a row
Well, thats all my pages so far. Thanks for reading!
Oct 12 2026