How can I use z-index to simulate a chip dropping through a connect four board to give it a 3d effect?

#1

Hey friends I’m making a connect four game and right now I can drop a the chip in it’s appropriate slot as well as change from a red chip to a yellow chip. However when you drop the chip it does not go into the board. It is layered outside of the board. I would like the chip thst’s being dropped to fall over the dark blue circle within each slot and fall under the slot itself. So it would look realistic and 3d. I thought I would be able to do this with z-index, but I have 2 problems. 1st When I set the div slots to z-index of 3, even though the falling chip has a zindex of 2; the chip still falls over the slot? 2nd, even if that did work the dark blue circle in each slot would now be hidden because the div has a higher z-index, they would need to be the same for both of them to be visible. But if they’re the same the chip cannot fall within the board? Any ideas on how to make this effect?

https://jsfiddle.net/bcpqs1x6/

#2

Hi,

Basically you can’t do it with simple layering because what you are looking for is circular holes in the foreground to allow the counter to show beneath.

You need to think outside the box and instead of having a coloured round section you need a transparent round section but you need the frame to be solid.

An old trick is to use box-shadow around a transparent circle and spread it out very wide and then hide the overflow. This allows the middle circle to be transparent but to be solid outside the circle.

I’ve added this effect to my old demo but I had to add an extra b element to do this (shame on me).

https://codepen.io/paulobrien/pen/QPNXJg

I’m not going to give the full answer as I know you want to work this out but it will take a little bit of fiddling about on your fiddle and removing and replacing backgrounds etc.

The crux of the technique though is that inside a square all colours and borders are provided by this extra element that basically has a hole in the middle so you can layer it on top and not obscure the middle circle section.

Here is a codepen of just the layering required.

https://codepen.io/paulobrien/pen/EzyPpm

As I said you will need to change things around a bit on your fiddle to accommodate this but as you can see from the demo above its probably simpler than what you had before.

2 Likes