So I have been trying to make a simple page with simple dropshadows. The problem comes when I add a couple of tabs to the box that has a drowshadow. I have placed a copy of the html and css at http://blah.eu5.org/test/.
Can anyone suggest where I am going wrong as I know I have seen it done properly using css before?
The white lines are actually silver lines, so you need this:
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
instead of
box-shadow: -1px -1px 0 silver, 1px 1px 0 silver, 0 5px 15px rgba(0, 0, 0, 0.4);
and it will be fine
Related
I have a form with orange background and a shadow:
and I'm trying to make the shadow with css.
the best result I got is here: https://jsfiddle.net/2f903rcr/
box-shadow: 0px 1px 2px 0px #505857, 0px 0px 7px 0px #505857;
Somebody know to do the same shadow in css?
I can't see your code and can't understand your image but there is something for you:
box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, .3);
https://jsfiddle.net/2f903rcr/3/
Fiddle here: http://jsfiddle.net/17zyydx1/
There's a gap on the left and right sides of the div, between the div and the box shadow.
It's most obvious on Firefox, but it's still noticeable on Chrome/Safari.
The offender:
.title {
position: absolute;
border: 0 none;
border-radius: 10px;
width: 375px;
height: 150px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 50px 50px rgba(0, 0, 0, 0.5);
}
I've tried setting border to 0 none, as you can see. Margin 0 does nothing, padding 0 does nothing (worth a shot), changing to a 1:1 ratio only makes it worse.
Removing the alpha makes it go away, but that's throwing the baby away with the bathwater.
Anyone know what the deal is?
It appears to be a rendering issue with an anti-aliasing effect on the physical edge of the div. If you change the div to an even number of pixels wide, it goes away on the vertical sides, but you can still see this on the corners because of the border-radius. The drop-shadow must be rendered at a different time (most likely after) then added into the page. With IE it seems to be worse as it 'walks' as the page is resized. I don't think this can be fixed, but you can minimise the issue with a div that is an even number of pixels wide.
You can make three shadows as your shadow... One of them is your main shadow, you have to put it after two transparent shadows and adjust the two transparent shadows as you want. :))
#spsh{
background-color:cyan;
width:150px;
height:100px;
box-shadow:6px 6px 7px white , -6px 6px 7px white , 0px 20px 19px cyan;
}
<div id="spsh"></div>
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.
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.
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".