Dropshadow Overlay - What am I seeing here?

alexnferris · 2024-09-20T16:00:03.388Z

Hello,

I’m hoping someone can tell me what I’m seeing here…what is the differentiating factor causing the two behaviours? Cause it has me totally stumped.

I have several repeating groups (see below) in my UIs that have the same (css) boxshadow applied to them to give the cells the appearance of “floating”. However the boxshadow is behaving inconsistently in relation to “over shadowing” the cell directly below.

If you examine the first image you’ll see that there is no shadow cast on the 2nd cell by the 1st yet the 2nd casts a shadow on the 3rd which doesn’t cast a shadow on the 4th. The rest of the cells shown in that image cast shadows on each of their subsequent cells.

Initially I thought this behaviour was somehow related to the transparency setting of the cell’s background color after noticing cells whose background color was set to 100% were over shadowed whereas those set to less than 100% didn’t appear to be…but that no longer appears to hold true.

To further confuse the issue, on hover I have the background color of the hovered cell changing to white at 100% which causes any overshadowing of that cell from the one above to cease (see 2nd image where 3rd row is hovered) with no change made to the dropshadow css.

As you can see from the second image, the whole floating effect takes a tilted look if the top is overshadowed making each cell appear to be tilting backwards to the top…which is not the effect I’m looking for.

Any & all assistance would be greatly appreciated, I have been screwing around with this on & off for weeks to no avail. I can find conversation here about allowing shadow to overflow borders but nothing preventing it from overflowing subsequent cells in RGs.

(NOTE: I have CSS allowing overflow of borders for these RGs but if that were the cause then the hover issue mentioned above makes no sense…it should still overflow regardless. That’s my thinking anyway).

Cheers…

image957×1052 96.7 KB

jo1 · 2024-09-20T18:31:56.273Z

It is looking like this because there is opacity value on the background color for the rows that are looking weird, this could be caused by a condition since you said background color is set. Some gray ones in the first screenshot has background set and looking fine, also one white row on the second screenshot has background.

alexnferris · 2024-09-20T19:23:29.894Z

Ahhh…BOOM!

Spot on Jo1, thank you so much. You ROCK!

Sincerely appreciated. Have a great weekend.

jo1 · 2024-09-21T02:07:40.986Z

np man, im glad it helped

system · 2024-11-29T16:00:15.865Z

This topic was automatically closed after 70 days. New replies are no longer allowed.