How to add drop shadow (css?) to Cornerstone Card elements

Support
#1

On my page, https://easystartup.net you can see directly below the header I have 4 columns set up with 4 cornerstone card elements with a flip -> transformation. Directly below them I have a column that says “Pro Bundles” and you can see it has a drop shadow effect. I’m guessing I need to use CSS somewhere for this effect to be achieved also on the boxes, - I would like the option in the code to play around with the shadow being active when the box is not hovered/flipped and when it is flipped over showing no shadow - and vice versa so if you could explain to me so I can learn in the code for next time I would really appreciate it.

Also - is it possible to round the corners of these cornerstone card elements? using css? like how you can round the containers with a border in the builder?

If you guys can help me with this I will be grateful as always, looking forward to your response.

#2

Hi William,

Thanks for writing in!

There is such option in the card element to add box-shadow. You have to use custom CSS for that.

1. Please give a class name to the card elements you want to give shadow.

2. Please add this CSS to your Theme Option -> CSS

.shadow-box .x-face-outer.front, .shadow-box .x-face-outer.back {
box-shadow: 0em 0px 1em 0em rgba(0,0,0,0.35);
}

If you want to ad border radius please update the CSS.

.shadow-box .x-face-outer.front, .shadow-box .x-face-outer.back {
box-shadow: 0em 0px 1em 0em rgba(0,0,0,0.35);
border-radius: 5px; /* you can change the value /*
}

Hope this helps!

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.

1 Like
#3

great post, thank you so much for being insightful enough to recognise I am learning while asking you these questions and providing me these resources. You guys are simply the best.

#4

You’re most welcome!

#5

I have another question regarding these cornerstone cards, On the back side (flipped over side) of the card is a “button element” - on my page it says “buy now” -

Can you please give me a css code to target this back button and add a mouse-over/hover effect to it? as well as a hover effect to the text contained in the back button?

Also on the front side of the card, how can I change the font of the Header used? I added an /< h2 >/ tag but I can’t seem to find in the theme where I can change the font of my h2 tag, if you see my other headings, like “powerful alone, better together” and “are you ready to take control of your future” are using a different font than where it says “Pro Bundles” I would like Pro Bundles to match that font style as the other headers - I just want the font of “Pro Bundles” changed, not the other cards font headings. I hope I was clear, sorry if it was a bit confusing.

Thank you so much in advance.

#6

Hello William,

Thanks for updating the thread.

Please add following CSS under Pro > Theme Options > CSS:

.x-card-outer .x-face-button:hover {
    background-color: #fff !important;
    color: #000 !important;
}
.x-card-outer .x-face-title {
    font-size: 1.5em;
    font-weight: 700;
}

Let us know how it goes.

Thanks.

#10

Hi William,

You can let us know how it goes,

Thanks,

#11

Hey I just want to say thank you to all the amazing developers who helped me out with this post. I have already used some tricks I learned here in other parts of my website. You guys are simply the best.

All of the answers here were bang-on correct and exactly what I needed. Wow. I recommend theme.co to everyone even my family that want’s to make a small simple website as I see you guys are supporting builders at every level to get their projects done!

#12

Thank you for the kind words, we are gratified that we’re able to help you with this.

Cheers!

#13

Hi I have one more question regarding this topic. So currently I’m using the following css code as provided by the wonderful team here at Theme.co.

/* Shadow Box for Cornerstone Cards + Border */
.shadow-box .x-face-outer.front, .shadow-box .x-face-outer.back {
box-shadow: 0em 0px 1em 0em rgba(0,0,0,0.35);
border-radius: 10px;
}
.x-card-outer .x-face-button:hover {
background-color: #5951da !important;
color: #00ffbb !important;
}
.x-card-outer .x-face-title {
font-size: 1.5em;
font-weight: 700;
}

However I now have the issue when using the “image” element in my Pro builder and then viewing the image on the actual site there is a drop shadow effect on all of my images! It’s weird this doesn’t happen on PNG images, just on boxed square images without alpha channel… I’m not sure what’s going on, I hope you guys can help me to figure this out…

Thanks again in advance.

#14

Hi William,

I see this custom CSS code below is the culprit of that image shadow.

.e98-29 .x-line, .e98-29 .x-image img {
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}

Is that familiar to you? I don’t see that code given by us (at least on this thread)

If you don’t see that on Theme Options > CSS, then maybe it was added on the Image’s Element CSS area. Please remove it if you don’t want the shadow on the image.

Thanks,

#15

Thanks I didn’t even see that or realize you could isolate the css to the element areas.

#16

You’re welcome!
Thanks for letting us know that it has worked for you.

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.