-
Posts
-
Hello,
I am using the clip-path css style on a column. I would also like that column to have a drop shadow. From what I have read, you cannot use the drop-shadow style with clip-path, you need to use the filter css style instead. To do that, you need to have a parent class and a child class to achieve this. Is this possible to do? Right now, in the column, I have clippers assigned as the CSS class; I have clippers-wrap assigned in the Lockable CSS class. My code is below:
.clippers-wrap {
filter: drop-shadow(0 0 10px rgba(0, 0, 0, .3)) !important;
margin: 0 4% 0 0
}.clippers {
background: #f2f2f2;
margin: 15px 0;
-webkit-clip-path: polygon(0 0,100% 0,100% 90%,90% 100%,0 100%);
clip-path: polygon(0 0,100% 0,100% 90%,90% 100%,0 100%);
}I have also included a link to the site that I’m working on as well. Thank you!
Hey bbertuzzi7,
Thank you for the inquiry.
Please take note that the Lockable CSS value is specifically applied to Custom Element Templates. This means that the columns themselves only contain the “clippers” class name at the moment. To achieve the desired result, you should apply the “clippers-wrap” class name to the column itself and manually create a container inside the column using a Text Block. This container should have the class name “clippers”.
Best regards,
IsmaelHi,
You will have to add something like this in a text or code block.
<div class="clippers">content here</div>The class name “clippers-wrap” will have to be applied to the column containing this text block.
Best regards,
IsmaelThank you. When I do that and add it into the column, it doesn’t give the column a drop shadow, it gives all of the content within the column a drop shadow. I only need the column to have a drop shadow, like this site: https://tecex.com/
Hi,
Sorry for the confusion. You should apply the “clippers” class name to the column, then add a text block with the “clippers-wrap” container. You may need to place all content in this single text block.
Best regards,
Ismael
- You must be logged in to reply to this topic.