Tengo una grilla de celdas. Me gustaría crear un efecto de celdas verdes elevadas y rojo "presionado". Para el efecto elevado box-shadow en la parte inferior derecha exterior funciona muy bien, porque la siguiente celda cubre la sombra de la celda anterior. Para el efecto box-shadow: inset en la esquina superior izquierda parece ser una buena opción, sin embargo, estoy luchando para que funcione al tocar las celdas, muestran sombras entre las celdas.
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>¿Alguna sugerencia sobre cómo solucionar el problema con la sombra que se muestra entre las celdas? [EDITAR] nombre de clase agregado para cada lado que requiere una sombra
Si conoce el número de celdas en una fila (n) o puede calcularlo, en lugar de agregar siempre la sombra superior e izquierda a una celda roja, puede agregar el estilo de sombra izquierdo, superior o ambos.
Este fragmento usa degradados lineales en lugar de sombras insertadas (porque las sombras insertadas me resultan demasiado confusas...).
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>