Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Box shadow

  1. #1
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,453
    Thanks
    71
    Thanked 102 Times in 101 Posts

    Box shadow

    I am trying to get a box shadow on the left, top and right side of my box (or all 4 sides if easier).
    While the box shadow works, and is the correct 5px, it won't show on the right side.
    Please let me know where I messed up. Thank you

    Code:
    #main .box {
    	margin-left: 0;
    	box-shadow: -5px -5px 5px #888888;
    }
    Box shadow-boxshadow.jpg
    Last edited by myfayt; 05-10-2014 at 11:14 PM.
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Kansas, USA
    Posts
    487
    Thanks
    0
    Thanked 54 Times in 53 Posts
    Many resources leave out (or just don't emphasize) that there is an optional fourth length to box-shadow that is its "spread". Try this:
    Code:
    #main .box {
    	margin-left: 0;
    	box-shadow: 0px 0px 5px 5px #888888;
    }
    The first two 0px will keep the shadow centered so you get the same amount on all four sides. The first 5px is the blur (like you had before). The second 5px is the spread. This expands the shadow 5px in all directions.

  • Users who have thanked kansel for this post:

    myfayt (05-10-2014)

  • #3
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,453
    Thanks
    71
    Thanked 102 Times in 101 Posts
    Makes sense to me, I'll keep a note of the values. Thank you
    Been a sign maker for 7 years. My business:
    American Made Signs


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •