Shadow question

[t956gon]

Hi...how do i add shadow under the forum box on the left and right at the bottom..ive seen it on a few forums...thanks

 

[Jake Bunce]

Can you be more specific? Got an example?

 

[t956gon]

Something like this... with the shadow left and right just on the bottom

 

[Jake Bunce]

Underneath the blue bar in the footer?

To create that shadow would require an image. Here is an example using a background image to create a stylized shadow effect:

http://xenforo.com/community/threads/design-help-image-css.31136/#post-356249

A shadow like that can't be created with just CSS. CSS could be used to create a "straight" shadow though.

 

[Shelley]

I have that design on my current style http://www.bbsmiley.com/

I'm sure the code i wrote for it is terrible and not great but you are more that free to take the shadow images.

edit: added images in attachment (below)

 

[t956gon]

Thanks Jake and Shelley. i got it working with a normal html but not with Xenforo ..Shelley i bet your codes better than mine ... feel free to have a laugh

<div class="box effect2">
<iframe height="395px"width="100%"  src="http://marci491.getmarci.com/";;name="iframelink" frameborder="0" style="background-color:#fcfcff;border-right:1px solid #E5B55B;border-left:1px solid #E5B55B;border-top:1px solid #E5B55B;border-bottom:1px solid #E5B55B"  width="70%" scrolling="no" ></iframe>
</div>
 
<style>
 
 
 
 
.box {
 
 
 
    margin:4px auto;
}
/*==================================================
* Effect 2
* ===============================================*/
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
 
</style>