I have a footer on my web site, and I'd like to have a subtle shadow cast above it. The CSS looks like this:
div.footer {
-webkit-box-shadow: 0px 0px 7px $dark2;
-moz-box-shadow: -7px 0px 7px $dark2;
box-shadow: 0px 0px 7px $dark2;
}
As I'm sure you're all familiar, Mozilla extends pages to render the full extent of a box shadow, which is a problem if you have elements extending 100% wide, such as my footer.
I've already tweaked the moz declaration to prevent horizontal scrollbars, (I did this on my menubar on my site as well), but when I put this on my footer I found that Mozilla extends the page 7px past the footer on the bottom now. I was surprised by this because it doesn't extend the page vertically past the menubar at the top of the page...
So, has anyone got a solution for rendering a top-only box-shadow in Firefox?
EDIT: See a fiddle of this at: http://jsfiddle.net/burlesona/2LwXa/
Try box-shadow: 0px -7px 7px -7px #333;.
The fourth value is the spread of the shadow. Negative values cause the shadow to shrink. Combined with the blur, it results in a shadow with the same size as the element, which the offset-y then moves in to view.
Related
I have a very basic static HTML web page with borders and box shadow on a containing element.
The box shadow displays correctly on desktop browsers but on the Chrome mobile browser (only tested on Chrome) the box shadow on the bottom edge of the element is much larger than it should be.
There are also inconsistencies in how it displays. Sometimes when I first load the page I don't see the box-shadow and then it will suddenly appear.
I've checked for errors in the HTML and CSS but can't find anything wrong.
This is the code I'm using for the box shadow:
-webkit-box-shadow: 0 1px 5px rgba(255,255,0,0.5);
-moz-box-shadow: 0 1px 5px rgba(255,255,0,0.5);
box-shadow: 0 1px 5px rgba(255,255,0,0.5);
I've recreated the page on Codepen:
https://s.codepen.io/sean-collins/debug/GRKvBeP/YvkgOeODyLNk
I've changed the colors of the borders and color and size of the box-shadow to make it easier to see them but otherwise everything is the same as on the actual page.
I've got this page where I'd like to give to the exterior of the player a blurry effect, something like this, with the black part being transparent. Is it possible to do that only with CSS?
Thanks!
Try using box-shadow instead of a css border
box-shadow: 0px 0px 10px #000000;
ive got a css problem with td´s in a table row.
hovering on a td makes a box shadow visible but its always cut on the right side, except the last one. showing here: http://i39.tinypic.com/2ztdk6c.jpg
ive already tried to fix it by increasing z-index value up but it didnt fix it.
td:hover {-webkit-box-shadow: 0px 0px 10px -1px #888;box-shadow: 0px 0px 10px -1px #888;z-index:100;}
how can i fix it so the box shadow shows on all 4 sides?
thanks
You need to set position for z-index to take effect, unless you already did in td style definition.
My goal is to add a drop shadow to the left and to the right side of a #container div, which is 960px wide.
The #container itself contains a header, a nav menu, main content, sidebar, and foot. But the header itself juts out of the #container with a custom width due to a graphic.
As such, it does not get a drop shadow added to its right and left. Only the nav menu down needs the drop. This is because the header is set to a custom width, and juts out beyond the #container itself. A drop shadow to the left and right of a thing that already juts out would ruin the aesthetics.
For better visualization, my site looks similar to http://www.doubleyourdating.com/, but the header element juts out on both sides.
I've tried to add a drop shadow to the left and to the right side of the #container, from the nav menu down with the following solutions:
I Photoshopped a 1px high, 1010px wide image which contains a 25px "fade" on opposite ends. I CSS'd that as the #container div background-image, but, probably because the #container itself is set to 960px wide, the 1010px wide background can't show up. Note that changing the 960px width will create a cascade of death in this simple 2 column layout.
I tried CSSing up a makeshift shadow box div "around" the container div, but that isn't working because my header has a custom width that extends wider than the container.
How do I make this work?
You could try something like this:
box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
Of course, mess around with the values until it suits you.
Single line of code :
box-shadow: 4px 0 2px #222, -4px 0 2px #222;
Just insert in corresponding css style element
Done!
I've been polishing up a page I built over the past day or two and have run into an issue after using box-shadow - I was hoping someone might shed some light on an easy way to fix this.
The Setup:
I have a div that has a few properties, including width, max-width, and box-shadow.
#mydiv {
width:100%;
max-width:1200px;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
}
The Problem:
The "box-shadow" property adds 40px to the width of the div element - 20px on each side. When a screen is small enough that the content should hit the 100% width attribute, we see a horizontal scroll-bar. After digging through the CSS I discovered it was because the div was technically something more like width: 100% + 40px;
What I've Tried:
I've considered setting overflow:hidden on the parent div, but I do have a min-width set that would then make content inaccessible. I've also tried using a percentage for the size argument in the box-shadow CSS - 1% for example - and then setting the div's width to 98% - but the box-shadow CSS doesn't seem to accept a percentage for its size. I also have considered using javascript to test the browser width and then display or hide the box-shadow element accordingly, but it doesn't seem like the optimal solution.
There has to be a simpler way to handle this. Thoughts?
It's a browser bug.
The spec used to be unclear about this, but wording has since been added to clarify that shadows shouldn't trigger scrolling:
Shadows do not trigger scrolling or increase the size of the scrollable area.
But as a result of this earlier omission, most browsers did trigger scrolling for shadows. This has now been fixed in all recent browsers.
In older browsers, you'll either have to live with the scrollbars, add overflow-x: hidden to your #mydiv and hope it doesn't break anything, or find another way to add shadows (e.g. using good old PNGs).
Also see the following two related questions:
Firefox & CSS3: using overflow: hidden and box-shadow
CSS box shadow on container div causes scrollbars
There's a workaround to the problem of scroll bars in fluid width sites with box shadow.
If you add an #media instruction in your CSS you can detect when the browser window is at a certain width (modern browsers support this and IE9 should too).
For example, for a centered pagewrap div with a max-width set to 940px, try adding this to your stylesheet:
#media screen and (min-width: 998px) {
div#pagewrap {
-moz-box-shadow: 3px 8px 26px #a1a09e;
-webkit-box-shadow: 3px 8px 26px #a1a09e;
box-shadow: 3px 8px 26px #a1a09e;
} }
The min-width of 998px in the #media css is to make the drop shadow disappear just before it triggers the scroll bar.