SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: box shadows

  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    box shadows

    I'm trying to play around with box shadows, but I'm a little confused about how to use them correctly.

    Basically I want the second white box shadowed like the first one. As you can see it's not quite right and the bottom of the top one is giving more depth. How would I make this look it's best?

    http://79.170.40.244/healthmeanswealth.co.uk/

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by hantaah View Post
    the bottom of the top one is giving more depth.
    Isn't that just because of the doubling up of bottom and top shadows?

  3. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    wouldn't the top of the bottom one have the same depth then?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    They are both the same, but where their shadows overlap, the effect doubles, so to speak, and appears darker.

  5. #5
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    what I'm saying is I'm trying to understand how to work these shadows. If that's the case and I need to reduce the bottom shadow. I would have thought the 3rd number would represent the bottom shadow but changing the 150 doesn't give me ther desired result. so how do these numbers work and how do I use them to reduce the bottom shade or right / left etc?

    0px 10px 150px -50px #000

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,527
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    I thought that Ralph's explanation would have surely answered your question.

    However, see if this helps:

    http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

    "Play it" allows you to select different values for the properties.

    Perhaps you'll find the answer there.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,805
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    you are thinking of the property all wrong.

    Box shadows are like the BASIC dropshadow effect in PS. The property generates a box, to which a BLUR can be ADDED ( this makes the generated image even larger than the dimension of the original element). You can also control the spread ( with that fourth value you were mentioning ), but that value will take effect all around the shadow image, and not on a specific side.

    in other words, NO MATTER WHAT YOU DO , a box shadow image will retain the same aspect ratio as the box it was generated from, ( this is , BTW, the mathematical definition of the word 'drop shadow' )


    That being said, nothing precluded you from making drop shadows of generated elements ( such as :before/:after) which are the size you want,and using absolute positioning , to place them behind your desired object.


    Code:
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<meta name="viewport" content="width=device-width">
    		<style type="text/css">
    .x, .w>div{  width: 350px;position: relative; background: pink;  }
    .x:after{position: absolute; top:3px; bottom:3px; left:0; right:0;   content: ''; box-shadow: 0 0 6px   #000; z-index: -1 }
    h3, p{ margin:0; padding:10px;}
    .w{overflow: hidden; margin:10px 0    }
    .w>div{margin:0 10px; box-shadow: 0 0 6px #000; }
    		</style>
    	</head>
    	<body>
    <div class="x">
    <h3>This elements appears to have  only <em>vertical</em> box shadow</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    
    <div class="w"><div>
    <h3>you coul also use wrappers to <em>crop</em>  drop shadows</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div></div>
    
    
    	</body>
    </html>
    Speaking of which, you may consider the Z index (making it bigger.. you will need to add position relative if it doesnt have ap/rp already)of your second box, I think the drop shad of the first is casting over your second element.


    hope that helps

  8. #8
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @ronpat ; I totally understand the concept of showdows doubling up, that is not my query

    @dresden_phoenix ; your totally right I am thinking of them wrong and your explanation explains it fully and put things right, thank you. I can now understand how to work them with this explanation, much appreciated

  9. #9
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    @dresden_phoenix ; just trying to understand this after positioning, what is it exactly? a shape behind the element we are shadowing? and is it this that controls the shadow?

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,527
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Have to agree with you, hantaah. @dresden_phoenix 's explanation of drop-shadows, comparing them to box-shadows, and describing the math relationship, was most enlightening. Best I've read, anyway. Thanks, d_p!

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by hantaah View Post
    @dresden_phoenix ; just trying to understand this after positioning, what is it exactly? a shape behind the element we are shadowing? and is it this that controls the shadow?
    The :after pseudo element is a means of adding generated content into the html in conjunction with the content property.

    You can effectively create another element "after" the content in the element it refers to (not after the element itself but after the content in that element). Therefore as Ray suggests above you can create some absolutely positioned elements inside or around your original element at any size you want and then apply styles to these as required.

    It seems to be from the posts above that you missed the point where it is mentioned that the doubling of your shadows is simply where they overlap each other. If you moved the elements further away from each other then you would see that the shadows were as you expected.

    The box-shadow an element generates does not affect the flow of the document so anything in the way will have the shadow under (or over) then including the box shadows of other elements. Usually a box shadow effect is quite subtle with a small spread so this is not an issue but as you are using very large shadows then they will of course overlap and double up on other elements.

    You could in your example change the vertical position of your shadow but that means that the last element will have no shadow at the bottom unless you add a special class to it. One of the easiest ways to understand box-shadow is simply to play with the generator for a few minutes and you can see what effects can be achieved and how they interact.

    It is also possible to have more than one box-shadow on an element anyway as you just use a comma separated list and using a negative spread radius you can create shadows that look smaller than the box on one side or on each side.

    e.g.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .x {
    	width: 350px;
    	padding:20px;
    	margin:20px;
    	position: relative;
    	background: red;
    	box-shadow: -8px 0 6px -6px black, 8px 0 6px -6px black;
    	transition: all 2s ease;
    	border-radius:5px;
    }
    .x:hover { box-shadow:0 -8px 6px -6px black, 0 8px 6px -6px black; }
    </style>
    </head>
    
    <body>
    <div class="x">
    		<h3>This elements appears to have only vertical box shadow</h3>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    </body>
    </html>
    You can add as many shadows as you like and indeed add inset shadows also.

  12. #12
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    562
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Just a follow up to this as I was getting undesired results with the bottom of the top shadow and top of the bottom and it was said it was because they were overlapping. However I have not changed the shadows at all and now they are showing nicely behind the both.


    so the problem was as how @dresden_phoenix ; said here

    you may consider the Z index (making it bigger.. you will need to add position relative if it doesnt have ap/rp already)of your second box, I think the drop shad of the first is casting over your second element.
    well spotted! Many thanks again


Bookmarks

Posting Permissions

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