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?
Isn’t that just because of the doubling up of bottom and top shadows?
wouldn’t the top of the bottom one have the same depth then?
They are both the same, but where their shadows overlap, the effect doubles, so to speak, and appears darker.
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
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.
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.
<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
@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
@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?
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!
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.
<!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.
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