Apply inset box-shadow to the outside of touching cells only

Question

I have a grid of cells. I'd like to create an effect of raised green cells and "pressed in" red. For the raised effect box-shadow on outside bottom-right works great, because next cell covers previous cell shadow. For the "pressed in" effect box-shadow: inset on top-left corner seems to be a good choice, however, I'm struggling make it work with touching cells, they show shadow between the cells.

const list = [],
      type = {red:[2,5,6,16,17,11,12,13,36,46,38,48,21,22,23,31,32,33], green:[37,47,39,49,65,66,67,75,76,77,85,86,87,81,82,92,93]},
      width = 10,
      height = 10;

for(let i = 0, t; i < 100; i++)
{
  t = type.red.includes(i) ? "red" : type.green.includes(i) ? "green" : "";
  list[i] = t;
  const c = document.createElement("div");
  if (list[i])
    c.className = list[i];

// add class for each side outside of the cluster
  if (t = type[t])
  {
    if (!t.includes(getIndexOffset(i, 0, -1)))
      c.classList.add("top");

    if (!t.includes(getIndexOffset(i, 1, 0)))
      c.classList.add("right");

    if (!t.includes(getIndexOffset(i, 0, 1)))
      c.classList.add("bottom");

    if (!t.includes(getIndexOffset(i, -1, 0)))
      c.classList.add("left");
  }
  table.appendChild(c);
}

function getIndexOffset(index, offsetX, offsetY)
{
  return (~~(index / width) + offsetY) * width + (index % width + offsetX);
}

#table
{
  display: flex;
  flex-wrap: wrap;
  width: 11em;
}

#table > *
{
  width: 1em;
  height: 1em;
  border: 1px solid black;
  margin: -1px 0 0 -1px;
  background-color: white;
}

#table > .green
{
  background-color: lightgreen;
  box-shadow: 0.2em 0.2em 5px 0 black;
  z-index: 1;
}

#table > .red
{
  background-color: pink;
  box-shadow: 0.2em 0.2em 5px 0 black inset;
  z-index: 3;
}

<div id="table"></div>

Any suggestion how to fix the issue with shadow shown between cells? [EDIT] added class name for each side that requires a shadow

Answer 1

If you know the number of cells in a row (n) or can work it out then instead of always adding the top and left shadow to a red cell you could add left, top or both shadow styling.

This snippet uses linear-gradients instead of inset shadows (because I find inset shadows too confusing....)

const n = 10; //number of cells in a row

for (let i = 0, r = [2, 5, 6, 16, 17, 11, 12, 13, 36, 46, 38, 48, 21, 22, 23, 31, 32, 33], g = [37, 47, 39, 49, 65, 66, 67, 75, 76, 77, 85, 86, 87, 81, 82, 92, 93]; i < 100; i++) {
  const c = document.createElement("div");

  if (r.includes(i)) {
    c.classList.add('red');
    // r - n is the position of the cell immediately vertically above (if there is one else < 0)
    // if (!r%n == 0) r - 1 is the position of the cell immediately horizontally to the left 
    if (!r.includes(i - n) && (i % n == 0 || !r.includes(i - 1))) {
      c.classList.add('bothShadows');
    } else {
      if (!r.includes(i - n)) c.classList.add('topShadow');
      if (!r.includes(i - 1)) c.classList.add('leftShadow');
    }
  }

  if (g.includes(i))
    c.className = "green";

  table.appendChild(c);
}

#table {
  display: flex;
  flex-wrap: wrap;
  width: 11em;
}

#table>* {
  width: 1em;
  height: 1em;
  border: 1px solid black;
  margin: -1px 0 0 -1px;
  background-color: white;
}

#table>.green {
  background-color: lightgreen;
  box-shadow: 0.2em 0.2em 5px 0 black;
  z-index: 1;
}

#table>.red {
  background-color: pink;
  background-repeat: no-repeat;
  z-index: 3;
}

#table>.topShadow {
  background-image: linear-gradient(black, transparent);
  background-size: 100% 5px;
}

#table>.leftShadow {
  background-image: linear-gradient(to right, black, transparent);
  background-size: 5px 100%;
}

#table>.bothShadows {
  background-image: linear-gradient(to right, black, transparent), linear-gradient(black, transparent);
  background-size: 5px 100%, 100% 5px;
}

<div id="table"></div>