Shadow box only for inner box of container - css

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;
}

Related

how to put a vertical line in sudoku table

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.

inset box shadow not working in my case?

div{
height:100px;
width:100px;
background:pink;
box-shadow: 0px 0px 0px 3px #000;
}
Above css worked but when I do box-shadow: inset 0px 0px 0px 3px #000; is wasn't work, I also tried box-shadow: 0px 0px 0px 3px #000 inset. Any idea?

try it with smaller number of parameters:
box-shadow: inset 0px 0px 3px #000;
or with specified engine:
-moz-box-shadow: inset 0px 0px 10px #000000;
-webkit-box-shadow: inset 0px 0px 10px #000000;
box-shadow: inset 0px 0px 10px #000000;

The syntax of box-shadow property is as follows:
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
You are not setting any value to h-shadow and v-shadow. That is why you are not able to see a shadow.
Try this code
div {
box-shadow: 10px 10px 5px #888888;
height: 100px;
width: 100px;
}
<div>
</div>

css - make shadow only on top of a div tag

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

css - shadow on right and left

hi there i am using the following code to get a shadow on the right and left side of a div tag but all four sides of the div are shadowed...
.shadow1 {
border-right:1px solid #8d8d8d;
border-left:1px solid #8d8d8d;
-moz-box-shadow:0px 0px 5px 0px #000;
-webkit-box-shadow: 0px 0px 5px 0px #000 ;
box-shadow: 0px 0px 5px 0px #000;
}
is there a way to get the shadow appear only on the right and left side of the div... ?? any help would be appreciated... thanks in advance... :)

This seems to work ok :)
box-shadow: 5px 0px 5px -4px #000,
-5px 0px 5px -4px #000;
EDIT: Oh, I'm waaay late :p looks like we came to more or less the same conclusion tho.

try this:
jsFiddle
div {
width:200px;
height:200px;
margin:20px;
border:1px solid #8d8d8d;
-weibkit-box-shadow: 5px 0px 10px -5px #000, -5px 0px 10px -5px #000;
-moz-box-shadow: 5px 0px 10px -5px #000, -5px 0px 10px -5px #000;
box-shadow: 5px 0px 10px -5px #000, -5px 0px 10px -5px #000;
}

Try this : http://css3-drop-shadows.herokuapp.com/app
It provides a css3 generator at the end.
It uses :before and :after

Can I have a inner shadow on both sides?

-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

Resources