In the Chrome browser it's not possible to style a table row with box-shadow on hover. It does work in Chrome when you assign the box-shadow to td with pseudo classes :first-child and :last-child. (reference: Table Row Box-Shadow on Hover (Webkit) )
I'm trying to use box-shadow for a glow effect on a table row. The problem is that without h-shadow or v-shadow values the box-shadow also appears in the middle of the table row.
JSfiddle: http://jsfiddle.net/2nw4t/25/
tr:hover td {
-moz-box-shadow: 0px 0px 16px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 16px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 16px 0 rgba(0, 0, 0, 0.5);
}
A solution for this problem would be a overlay div positioned with jQuery, but i'm wondering if it can be done with CSS only.
Related
I am trying to add a box shadow to my div but i only want the shadow to appear on the left, right and bottom of the div, does anyone know or can show me how i might remove only the top shadow from my div?
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
The basic Box-shadow values are:
box-shadow: [horizontal-offset] [vertical-offset] [blur](optional) [spread](optional) [color]
So for example:
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
would just be a shadow with no offset
box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
would be a shadow with 5px vertical offset, effectively pushing the shadow down, like so:
http://jsfiddle.net/TLQs9/
Rather than add an extra div to your markup, you can use :before to cover up the box-shadow with absolute positioning and negative margin.
div {
position: relative;
background-color: white;
box-shadow: 0 7px 20px 0 rgba(0,0,0,.4);
}
p {
padding: 20px;
}
div:before {
content: "";
height: 7px;
width: 100%;
position: absolute;
top: -7px;
background: inherit;
z-index: 2;
}
<div><p>Some container with shadow</p></div>
As of November 2022 there's a nice, clean way to do this using the CSS clip-path property.
div {
box-shadow: 0 0 10px black;
clip-path: inset(0px -10px -10px -10px);
}
Inset will clip away the element from the top, right, bottom, and left edges. For a this shadow in the example we're clipping anything beyond the top bounds, hiding the shadow on the top, and allowing 10px of space for the shadow on all other sides.
It's the clean, ideal solution to the problem in my opinion. Browser support is good, but if you want support in IE11 still you'll want to explore the polygon option instead of inset.
You can try this:
div {
-moz-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
-khtml-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
}
The first value is horizontal position.
Second value is Vertical position.
Third value applies blur in shadow.
Four value spread.
So try that your vertical an horizontal position match with blur and spread
Try this:
div{
box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
}
When I use this I have a shadow on all sides except the top. You can change the values and it still works. Just don't add a fourth value and you'll be fine.
Try This :
div
{
box-shadow: 0px 9px 29px rgb(102, 102, 102);
-webkit-box-shadow: 0px 9px 29px rgb(102, 102, 102);
-moz-box-shadow:0px 9px 29px rgb(102, 102, 102);
}
See in jsfiddle
See More 1
See More 2
None of the answers above worked for me. So as an alternative solution I used a patch. Inside the element/div with the box shadow.
Place a second div, width 100% and its background the same color as the main div, then position it to cover over the box-shadow, like so.
background-color: your background color?
width:100%;
position:absolute;
height 15px;
left 0;
top -10px;
You may need to tweek the height to patch over the box shadow. But it does work.
plus this trick could be used for any side.
CSS border radius works fine, but it's now revealing a white background. (I'd prefer transparent or grey, similar to body background...)
CSS:
.window_header{
width:600px;
height:42px;
background: #333 url("../img/bg-2.png") repeat;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-bottom:1px dotted #666;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3),inset 0 -4px 5px rgba(0, 0, 0, 0.2),inset 1px 0px 1px rgba(0, 0, 0, 0.7),inset -1px 0px 1px rgba(0, 0, 0, 0.7),inset 0 -2px 1px rgba(0, 0, 0, 0.5),inset 0 2px 6px rgba(255, 255, 255, 0.15),inset -2px 0 6px rgba(255, 255, 255, 0.15),inset 2px 0 6px rgba(255, 255, 255, 0.15);
}
The white should be from the background of the container "behind" the one you applied border-radius to.
Maybe try to apply border-radius to it as well.
I would recommend either applying Border Radius to the underlying Element so instead of having rough white edges, the element would have rounded corners. So you wouldn't see the white edges.
-or-
Place the whole element edit before the containing element so it sits on top of the white background and go from there.
Perhaps the bg-2 file isn't transparent in that area? Depending on the editor that you used to create the image, it may not have had the ability to make it transparent.
Max Gherkins's explanation is also a very big possibility. :)
background: #333 url("../img/bg-2.png") repeat;
Your background image is not transparent. If it is a "flattened PNG", make sure the background is "transparent" and not "white".
I got a requirement for text that looks like this:
Top shadow: 2px, #000, 75%
What does that mean? Is that just a text-shadow? What's the 75% mean?
Top Shadow, as described in this post, uses CSS3's box-shadow and the :before pseudo selector to add a shadow under the browsers bar by targeting the body element.
There is no top-shadow property in CSS, regarding the Top shadow: 2px, #000, 75% bit. There is however text-shadow & box-shadow.
It is not valid text-shadow.
May be you need such example (with correct syntax):
text-shadow: 0 0 2px rgba(0, 0, 0, .75);
or
text-shadow: 0 2px 2px rgba(0, 0, 0, .75); /* down shadow */
Notes:
rgba(0, 0, 0, .75) = #000 with 75% opacity
Updates: #Xander found technique which you are asked us about. In it box-shadow with css generated content are using:
body:before {
content: '';
position: fixed;
top: -1px;
left: 0;
width: 100%;
height: 1px
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, .75);
box-shadow: 0 2px 2px rgba(0, 0, 0, .75);
z-index: 100;
}
Currently I'm using this
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
but on specific size of screen I don't want box-shadow.
How can i override to disable the shadow?
Use CSS3:: Media Queries to create style based on the screen resolution. And use
box-shadow: none;
To disable the shadow.
i was wondering if there is something like text-shadow for DIVs, we all know that text-shadow is only for dropping a shadow to the text, but i want a shadow for a complete DIV.
any ideas?
Thanks
If you're using text-shadow you are using CSS3, so try the box-shadow property.
Actually you can do it with css3 on the newer browsers and filters with IE. I read about it in this extremely good article a while back. Basically you can take the following CSS and apply it to a div and it should work with FF, Safari, Chrome, Opera, IE5.5 and up.
.module {
/* offset left, top, thickness, color with alpha */
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
/* IE */
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
/* slightly different syntax for IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')";
}
You could try border-image
border-image: url(shadow.png);
CSS3 Only though
You can use images to get the shadow effects for divs. Alist apart has nice articles on it.