Jump to content


Photo
- - - - -

Box Shadow On 3 Sides

box shadow css

Best Answer Danny , 20 December 2012 - 11:46 AM

Hi,

 

This is not a PageLines issue, I recommend you review W3 Schools for assistance with CSS.

 

http://www.w3schools.com/css/

 

Or visit this website

 

http://css3gen.com/box-shadow/

Go to the full post


  • Please log in to reply
3 replies to this topic

#1 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

Posted 20 December 2012 - 11:38 AM

Hi There

 

Is it possible to create a box shadow (or a drop shadow) on 3 sides? See attachment to get an idea of what I wanting to achieve. I am essentially wanted to created a black transparency border around all 3 visable sides of the footer and all 4 sides of the main content area.
This is the css i tried to get BS to display on the top of the footer and one of the sides which did not work, see the footer display on this page:

Please Login or Register to see this Hidden Content



    -webkit-box-shadow: 0px -10px 0px rgba(0, 0, 0, 0.15);
                    0px 10px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow:    0px -10px 0px rgba(0, 0, 0, 0.15);
                    0px 10px 0px rgba(0, 0, 0, 0.15);
    box-shadow:         0px -10px 0px rgba(0, 0, 0, 0.15);
                    0px 10px 0px rgba(0, 0, 0, 0.15);

 

Or is it best to set a background image to the wrapper of each section?

Attached Files



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 16526 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 20 December 2012 - 11:46 AM   Best Answer

Hi,

 

This is not a PageLines issue, I recommend you review W3 Schools for assistance with CSS.

 

Please Login or Register to see this Hidden Content

 

Or visit this website

 

Please Login or Register to see this Hidden Content



#3 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

Posted 20 December 2012 - 01:59 PM

Just realised I could set wider dimensions for the site overall or set the width of the footer and content area to be wider than the site width, either could allow the space to create a transparent border at 10px solid.
 

When it comes to achieving such styling with PL which approach would you recommend to get the best cross browser result?

 

Here is my current progress:

Please Login or Register to see this Hidden Content

 

I am also a bit confused about your comment. The section of this forum is titled Customisation which is what I am asking questions about. I do go to w3schools site and find info there that I use. I am still relatively new to this. I signed up with pagelines foremost as a graphic designer doing webdesign with some but not an extensive coding knowledge. I am using PL to support my lack of coding and CSS skills i have - these skills are getting better all the time but I still need some support with customisation. Please explain what I can and can't ask help for here.

 

All your support to date is greatly appreciated.



#4 cerchris

cerchris

    Advanced Member

  • Members
  • 58 posts
  • LocationChristchurch, New Zealand
  • Framework Version:2.3
  • Country: Country Flag

Posted 20 December 2012 - 02:48 PM

Think I have this one all sorted.

 

Many thanks







Also tagged with one or more of these keywords: box shadow, css