1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Shadow question

Discussion in 'Styling and Customization Questions' started by t956gon, Apr 21, 2013.

  1. t956gon

    t956gon Member

    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
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Can you be more specific? Got an example?
     
  3. t956gon

    t956gon Member

    shadow.jpg
    Something like this... with the shadow left and right just on the bottom
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    t956gon likes this.
  5. Shelley

    Shelley Well-Known Member

    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)
     

    Attached Files:

    t956gon and Jake Bunce like this.
  6. t956gon

    t956gon Member

    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 :)


    HTML:
    <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>
     

Share This Page