-
Hey team,
I’ve never tried to use the Box Shadow twice in this configuration on the same container before and seem to be having some difficulty making two shadows show.
Using the Effects > Box Shadow I have created an Inset shadow, to give the inner edge of the container a raised 3d appearance.
I have then created a second box shadow, to show a shadow behind the outer container, which incidentally shifts with a 3rd Box Shadow hover effect. The problem is, as soon as I added the Second Box Shadow effect, the 1st Inset effect disappeared.
I can see that I can add a customer selector and have added a selector called
.gb-icon2but not sure if there is another step I need to take or if this will work at all?Thanks
-
Hi Brag D,
For reference, could you share admin login credentials so I can check your setup?
-
See login below.
-
Do you have an example or sketch of what you’re trying to achieve?
-
If you see the container below CC.03, you will see I have used a second container to achieve this, but not sure I can do it with CC.01 can I?
-
I see. You need a second Container as well. A div can only have one box-shadow attribute.
-
Ah, OK, I thought that might be the case. I will keep trying to create a second inner container without breaking the layout. That should be possible I think?
-
Yes, that should be alright.
Another way is to add it via custom CSS with a pseudo-element.
-
Hhhuuummm, unlike CC.03, the new container I have added to CC.01 is too small. Why is that?
-
You have padding added to the Outer Container. You need to move that padding to the inner Container.
-
Hahaha, that’ll be it, thanks Fernando. This probably looks better than trying to use the Box Shadow anyway. Thank you, have a great day.
-
You’re welcome!
-
Just quickly, is it possible to copy and paste effects to other containers?
-
You can save it as a Global Style.
- You must be logged in to reply to this topic.