-moz-box-shadow: inset 3px 0px #BDD4DE;
-webkit-box-shadow: inset 3px 0px #BDD4DE;
box-shadow: inset 3px 0px #BDD4DE;
That puts an inner shadow on the left side. Is it possible to have an inner shadow on both sides?
box-shadow accepts multiple values, so simply repeat your values with a -3px offset:
-moz-box-shadow: inset 3px 0px #BDD4DE, inset -3px 0px #BDD4DE;
-webkit-box-shadow: inset 3px 0px #BDD4DE, inset -3px 0px #BDD4DE;
box-shadow: inset 3px 0px #BDD4DE, inset -3px 0px #BDD4DE;
But those look more like borders than shadows. Perhaps you should use borders instead, and maybe with box-sizing: border-box in case you can't subtract from width or padding:
border-left: 3px solid #BDD4DE;
border-right: 3px solid #BDD4DE;
You can also use it like this
box-shadow:0px 0px 5px Grey
The first and secod value is the offset (use no offset) and the third value is the blur value
Related
im try to get vrticl line Under the arrow.
for the horizental line i used .
webkit-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.99);
-moz-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.99);
box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.99);
If you're specifically wanting to use box-shadow, you can use the first property in the box-shadow shorthand, which adjusts the horizontal offset:
webkit-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.99);
-moz-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.99);
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.99);
But given you're not using box-shadow to get a shadow effect (i.e. not using blur or spread), a border might be preferable, as it'll give you the same divider look you're after, but will be repositioned if you adjust the padding between your cells. You can do away with your browser prefixes too:
border-right: 3px solid rgba(0,0,0,0.99);
border-bottom: 3px solid rgba(0,0,0,0.99);
Use box-shadow: 5px 0 2px -2px rgba(0,0,0,0.99);
This sets the X offset more to the right.
I am using box-shadow but it makes the whole container wrapped with shadow, how can I make a shadow only in the inside (top center) box?
Have you tried INSET this will put a shadow on the inside of an element.
.shadow{
box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
-webkit-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
-moz-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
-o-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
}
i am using the following code to make a shadow inside a div tag..
box-shadow: inset 0 10px 10px -10px #000 , inset 0 -10px 10px -10px #000;
but i get shadows on the top and bottom.. i only want the shadow to appear on top not the botton something like the following picture..
i'e been tinkering with the codes for hours but nothing... how can i do this. thanks.
Like this?
box-shadow: inset 0 10px 20px -15px #000;
DEMO
You need to delete the part after the comma.
box-shadow: inset 0 10px 10px -10px #000;
http://jsfiddle.net/9LzV4/
-webkit-box-shadow:inset 0 3px 5px 0 #E3E3E3;
box-shadow:inset 0 3px 5px 0 #E3E3E3;
for more experiments go to css3 generator
-webkit-box-shadow: inset 0px 6px 16px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,0.75);
Demo
hi trying to get a drop shadow on all sides but the top, for a drop down sub menu
found this code on this site and it has shadow on all sides but not bottom
body {
width: 300px;
height: 200px;
margin: 20px auto;
-webkit-box-shadow: 0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999;
-moz-box-shadow: 0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999;
box-shadow: 0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999
}
how do i change to be shadow on all sides but top?
been trying on fiddle but for the life of me cant understand the above code to change it from top to bottom shadow
http://jsfiddle.net/PuKDb/
need it to be like this one
http://jsfiddle.net/leaverou/8tgAp/
but instead of red line the shadow from above...
im a cut and paste coder so any help would be appreicated!
body {
width: 300px;
height: 200px;
margin: 20px auto;
-webkit-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
-moz-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999
}
no explanation because you obviously have no interest in why it works, just that it does ;)
Probably the author will never access this topic again, but I found out the right definition is made by two declarations, instead of 3:
box-shadow: 3px 5px 8px -1px rgba( 15, 15, 15, .8 ), -3px 5px 8px -1px rgba( 15, 15, 15, .8 );
It's hard to explain, but if you define two primary colors you will see the reason in bottom shadow:
box-shadow: 3px 3px 8px -1px red, -3px 3px 8px -1px yellow;
The presence of a non-zero integer as first value mixes the two colors, producing a new one.
The point is, defining three declarations, one of them will overlay one of the others (depending the arguments) and thus produce darker shadows.
The same is valid for vertical offset. If both them are the same (here represented by 5px), another overlay will happen, in the bottom shadow, if positive, or in the top shadow, if negative (which is not the case of the topic).
I hope it helps somebody else.
This should work for you
body
{
width: 300px;
height: 200px;
margin: 20px auto;
-webkit-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
-moz-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999
}
.div {
-webkit-box-shadow: 0 3px 3px -3px #c00;
-moz-box-shadow: 0 3px 3px -3px #c00;
box-shadow: 0 3px 3px -3px #c00;
}
change the 2nd set of numbers according to the size and blur.
-moz-box-shadow: inset 3px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 3px 3px rgba(0,0,0,0.5);
box-shadow: inset 3px 3px rgba(0,0,0,0.5);
this makes an inset shadow on the top, and left. I can't figure out to make it on the bottom and the right instead!
Make the position values negative:
-moz-box-shadow: inset -3px -3px rgba(0,0,0,0.5);
-webkit-box-shadow: inset -3px -3px rgba(0,0,0,0.5);
box-shadow: inset -3px -3px rgba(0,0,0,0.5);