Menu
I am trying to create an inset box shadow effect to a TR element inside a table but with no success.
I am using the following CSS:
tr {
-moz-box-shadow: inset 0 0 5px #888;
-webkit-box-shadow: inset 0 0 5px#888;
box-shadow: inner 0 0 5px #888;
}
Live demo: http://jsbin.com/urage5/edit
Is it not possible to create that effect on a tr element?
809
Use a width calc() to position two elements next to each other. Then add the box-shadow to both elements, followed by the clip-path on only one of them. Set the z-index of the clip-path'd element to be higher than the non-clip-path'd element. Here's an example.
Inset shadows are drawn inside the border (even transparent ones), above the background, but below content. <offset-x> <offset-y> These are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the element.
That syntax is: box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color]; The horizontal offset (required) of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.
To preserve a functioning table you need to style the td-elements rather than tr. The same look as styling tr can be achieved by using the pseudo class :first-child and :last-child. Adding slightly different values to the box-shadow will do the trick - I also added border-radius for a better illustration:
td {
box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
td:first-child {
border-radius: 5px 0 0 5px;
box-shadow: 4px 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
td:last-child {
border-radius: 0 5px 5px 0;
box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.5) inset;
}
Check out the live example: http://jsfiddle.net/KtPdt/
For some more options also check out: https://stackoverflow.com/a/11002210/1106393
128
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
