Google Chrome tbody inset shadow doesnt work - css

I am trying to apply inset shadow to thead element of my table. It works in FireFox, but not in Chrome and Safari.
http://jsfiddle.net/jACGx/2/
tbody {
-webkit-box-shadow: 0 0px 5px rgba(180,180,180,1) inset;
-moz-box-shadow:0 0px 5px rgba(180,180,180,1) inset;
box-shadow: 0 0px 5px rgba(180,180,180,1) inset;
}
Please advice!


Try applying the shadow to the td:
td{
-webkit-box-shadow: 0 0px 5px rgba(180,180,180,1) inset;
-moz-box-shadow:0 0px 5px rgba(180,180,180,1) inset;
box-shadow: 0 0px 5px rgba(180,180,180,1) inset;
}
Is that effect you are looking for?

Related

Shadow box only for inner box of container

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

CSS box shadow query

I was fiddling around with CSS box shadow property. It seems like I can't have the top border shadow when I keep the angle at 90 degrees and apply some distance from bottom. Is there any way I can have top shadow along with bottom shadow.
Here is the FIDDLE
<div class = "someclass">
</div>
.someclass {
-webkit-box-shadow: 0 8px 11px -5px #000;
-moz-box-shadow: 0 8px 11px -5px #000;
box-shadow: 0 8px 11px -5px #000;
margin: 20px;
background: pink;
width:300px;
height:300px
}

box-shadow allows multiple, comma-separated values. You can achieve the effect you want like so:
.someclass {
box-shadow: 0 8px 11px -5px #000,
0 -8px 11px -5px #000;
}
Make sure to also add it to the appropriate prefixed declarations:
.someclass {
-webkit-box-shadow: 0 8px 11px -5px #000,
0 -8px 11px -5px #000;
-moz-box-shadow: 0 8px 11px -5px #000,
0 -8px 11px -5px #000;
box-shadow: 0 8px 11px -5px #000,
0 -8px 11px -5px #000;
}

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

css box shadow property is not working in safari

box-shadow: 3px 3px 6px 6px;
this property is working in chrome firefox IE but not in safari 5 browser
I tried writing like this but it isn't working
-webkit-box-shadow:3px 3px 6px 6px;

-webkit-appearance: none;
-webkit-box-shadow: 3px 3px 6px 6px #addacolor;
box-shadow: 3px 3px 6px 6px #addacolor;

you haven't defined color here (box-shadow: h-shadow v-shadow blur spread color inset;)
<color> If not specified, the color used depends on the browser - it is usually the value of the color property, but note that Safari currently paints a transparent shadow in this case.
so define color for safari
-webkit-box-shadow: 3px 3px 6px 6px #color_you_want;

For reference, I had a similar problem with this box-shadow :
box-shadow: 0 0.06rem 0 0 rgba(44, 43, 63, 0.1); (very small shadow!)
It was working in other browsers except for Safari(v.8) who didn't show that shadow. I had to increase the value.

Have you tried with
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;

#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
http://www.css3.info/preview/box-shadow/

Resources