Jump to content

Archived

This topic is now archived and is closed to further replies.

jmad

Section Shadow

Recommended Posts

jmad

I am wanting to add shadows below sections that will essentially be over the section below.  I've added the code below but the shadow doesn't show, however if I invert the shadow it will show in the section so I've got the correct area targeted.  Does the shadow not showing have something todo with z-index or is there something else I'm missing?  Should add I can see the shadow when I'm in DMS editor but not in Preview.

 

#pl_areau46563 {

 -webkit-box-shadow: 0px 9px 5px 0px rgba(172, 186, 182, 0.75);
-moz-box-shadow:    0px 9px 5px 0px rgba(172, 186, 182, 0.75);
box-shadow:         0px 9px 5px 0px rgba(172, 186, 182, 0.75);
}

Share this post


Link to post
Share on other sites
Danny

Hi,

Can you give me an example, are you referring to a section placed inside a column or a full width section i.e. a Canvas section?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Full width (canvas) section.

Share this post


Link to post
Share on other sites
Danny

OK, so just used your code on a section and cloned it, not sure what the issue is - https://cloudup.com/cOTfh3TmhyO


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Danny, 

 

So I noticed your sections were white so I cleared the background color off of mine and it works until a background color is added to the section via the options.  How do I accomplish both a color and the shadow? 

Share this post


Link to post
Share on other sites
Danny

Try this:

 

.canvas-shadow {
  .box-shadow(0px 0px 10px 10px rgba(0,0,0,0.2));
  position: relative;
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

That worked.  Would I need  -moz and -webkit with this for older browsers?

Share this post


Link to post
Share on other sites
Danny

No, because that is a LESS mixin, it already does the code for you.

 

.box-shadow(...);

 

when compiled to the browser gives you the following:

 

-webkit-box-shadow : ...;
   -moz-box-shadow : ...;
            box-shadow : ...;

Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×