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
CodePudding user response:
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>