0

I have an issue. I have a couple of cards in my application. Now we want to give those cards a box-shadow but also merge them to a big card instead of having them separately. So 2 cards will look like 1, since they will be connected on one of their sides.

Every one of those cards are modules coming from the CMS and it is impossible to put them in a wrapper together. Otherwise I would create a parent div and give the box-shadow to this div.

Thus, the result is the following:

enter image description here

I would create a hack that targets the n-th element of the cards and remove its box-shadow from one side. But that is also impossible as the number of cards that are connected can be more than 2 depending on the step of the checkout.

Thus, the question that rises is: When u have adjacent cards, can you somehow remove the box-shadow from their connecting points with maybe simple CSS? I have been struggling with it the whole day.

botana_dev
  • 418
  • 4
  • 16
  • You can use :first-child and :last-child selectors to make the box shadow in top of the first and bottom of the last card – Adri Feb 23 '23 at 09:39
  • This is tricky indeed, since box-shadow will always spread on all sides... Could this SOF question help you? https://stackoverflow.com/questions/11997032/how-to-get-box-shadow-on-left-right-sides-only – Kapcash Feb 23 '23 at 09:43
  • @Adri thanks for your answer mate. As I said, the number of cards is N. Thus, not possible – botana_dev Feb 23 '23 at 09:48
  • @Kapcash went through them, I don't think so – botana_dev Feb 23 '23 at 09:49
  • You can apply a "side only" box-shadow to all elements and a 3 sided shadow on the first-child and last-child elements. But as said, 2 or 3 sided box-shadow are tricky and usually does not render well. – Kapcash Feb 23 '23 at 10:03
  • Do these cards have a wrapper after all? Do they cover 100% of parent's height? – Jared Feb 23 '23 at 12:36

0 Answers0