I made a little menu with a few button. I've added a shadow to the menu buttons. It works perfectly. I would like to make some "depth" in the menu, so they really become "buttons". This works well if you play around with shadows.
Without any actions, the shadow should be at the left top corner.
#menu ul li {
-moz-box-shadow: -3px -3px -3px #888;
-webkit-box-shadow: -3px -3px -3px #888;
box-shadow: -3px -3px -3px #888;
}
But once I hover over it, this shadow doesn't want to go away, even when I do
#menu ul li:hover {
border-radius: 5px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
Why doesn't it want to go away?
the problem, as noted by #thirtydot, is that your box-shadow has an invalid value- the blur cannot be negative.
There's nothing wrong with the :hover, you just need to remove the - from the blur property and the code will work.
<blur-radius> (optional)
This is a third <length> value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow's edge is sharp).
https://developer.mozilla.org/en/CSS/box-shadow
Strange that it seems to break the removal on hover though; rather than just disregard the invalid value as the shadow is still output with a sharp edge.
Try this:
box-shadow: 0 0 0;
Is there any other CSS that's being applied to your li? That may be interfering.
Also see: http://css-tricks.com/forums/discussion/14829/trouble-with-box-shadow-on-rollover-hover/p1
Related
I'm having trouble formatting my footer because the box shadow from the main content div is going over it and making it look terrible.
I have looked through some other sources with people having a similar problem to me and have tried a few "solutions" but none have seemed to solve my problem.
What I want to find out is there a way to remove the shadow from only the bottom using CSS or is there a way to bring my footer div forward so it hides the bottom shadow.
Here's the code for the box shadow.
box-shadow: 10px 10px 5px #888888;
Thanks in advance.
A possibility would be to decrease the spread radius of the box shadow depending on the blur (blur is added to the total size), e.g.:
-webkit-box-shadow: 10px 0px 6px -3px #888;
-moz-box-shadow: 10px 0px 6px -3px #888;
box-shadow: 10px 0px 6px -3px #888;
The problem which remains is that you cannot set different blur or offset values for each side.
You can use tools like this to have a preview: http://www.cssmatic.com/box-shadow
Otherwise you could add another box which is used as overlay for the bottom or you go and have a look at the z-index property: http://www.w3schools.com/cssref/pr_pos_z-index.asp
just set box shadow like
box-shadow: 10px 0px 0px 0px #888888;
While using CSS3's box-shadow I am having an issue I do not usually have.
The box shadow usually just bleeds over the div edges, but not on this one.
box-shadow that is being cut off on the top and right hand side..
Heres the css I'm using for box-shadow:
-moz-box-shadow: 0 0 5px #555;
-webkit-box-shadow: 0 0 5px #555;
box-shadow: 0 0 5px #555;
Cheers
The problem is your center-main div is cropping off the edge of the shadow. Set overflow:visible on this and you should see it.
If box-shadow is being cut-off, make sure overflow:visible is set on any div(s) your element is contained in.
use padding + negative margin like:
.img {
padding: 10px;
margin: -10px;
}
I have run into this problem multiple times with IE, and the best solution I've found is to use a transparent outline around the div. This seems to prevent IE from clipping the box shadow, as it does even in cases where Gecko and Webkit don't. One great thing about using outline to fix this problem is that it doesn't affect the position of the div.
For example, I had a div with which I had used position: absolute and bottom: -30px to put it in a certain place relative to its parent div. IE, and only IE, was cutting off the top and bottom of the box shadow. Adding this outline fixed it, without changing the position.
outline: 10px solid transparent;
you can set this style img tag for show shadow-box correctly
.img{
margin:20px;
-moz-box-shadow: 0 0 5px #555;
-webkit-box-shadow: 0 0 5px #555;
box-shadow: 0 0 5px #555;
}
you can use
.img{
filter: drop-shadow(0 0 5px #555);
}
instead
I managed to resolve the same issue on my local project by setting the image to have the following css property:
position: relative;
I've also encountered this issue. In these cases I add position: relative and a z-index to the box shadow container.
Please see this fiddle for a visual.
So I've been using a shadow box inset to make a inner glow kind of making the edges blurry and shadowy like for a edge burn look. I'm trying to use it for the top and bottom only and not for the left/right sides. But it's not working. I'm using it on a overflow: auto <div> so that it can scroll and have a nice effect.
Here's my css:
#content {
font: 14px "Lucida Grande", "Lucida Sans Unicode", sans-serif;
line-height:1.2em;
height: 400px;
width: 500px;
overflow: auto;
float: right;
padding: 0 10px;
-moz-box-shadow: inset 0 8px 8px -8px #000, inset 0 -8px 8px -8px #000;
-webkit-box-shadow: inset 0 8px 8px -8px #000, inset 0 -8px 8px -8px #000;
box-shadow: inset 0 8px 8px -8px #000, inset 0 -8px 8px -8px #000;
}
You have a black shadow on a black background so naturally, you're not going to see anything. Turning off your black background, we can see the shadows just fine...
http://jsfiddle.net/sparky672/p3Mgn/1/show
So you just need to select different shadow colors. Here are your shadows changed to white #fff...
Full Size Demo
http://jsfiddle.net/sparky672/p3Mgn/3/
-moz-box-shadow: inset 0 8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;
-webkit-box-shadow: inset 0 8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;
box-shadow: inset 0 8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;
EDIT in response to OP's comments:
The browser is only given two colors to use in order to render a shadow.
1) The background image's color (or just background color in this case)
2) The shadow color
Wherever they're both the same, the shadow will be invisible.
To have a blurry effect using a black background, perhaps try #444 for the shadow... it looks pretty good I think...
http://jsfiddle.net/sparky672/p3Mgn/5/show/
Do you want to have shadow above content to blur top and bottom? If yes then the problem is that you shadow is shown below content. You can make it above it if you set "position: relative; z-index: -1;" to content block, but then you will not be able to click or scroll it.
Easier way to achive this effect is to use :before and :after pseudoclasses and css-gradients.
Example here: http://jsfiddle.net/V96wx/2/
In my example above you will need 2 containers — one for overflow and one for fades (to make it more bulletproof). But theoretically you can do it with only 1 container, I'll write how...
First of all — how :before and :after works. Simplest way to think about them is as about 2 more elements that will be added inside parent container before and after actual content. For example: .about:before will be added inside .about container, but before actual content.
:before and :after have one required property content if you didn't add it, element will not be created. conent may have one of the following values: htmldog.com/reference/cssproperties/content. In my example it was left blank. After element is inserted you can style it as you wish by the same rules you style every other element.
To make fade in my examples I used gradient with trasparency. You can read about gradients here davidwalsh.name/css-gradients. Transparecy is done by using colors in rgba (4th digit is transparency level).
The reason why I used 2 containers in my example is because it is harder to accurately position :before and :after elements above main container without it — if you try to use realtive coordinates for them they will position rightly, but will scroll with content and if you not use position: relative on base container you will need to know this container coordinates to make positioning. It is not a problem if container height is fixed but may be tricky if it is not.
BTW: Theoretically there is an even easier way to do fade — by using css masks with gradients ( webkit.org/blog/181/css-masks ) but right now it's working only in Safari and Chrome.
Is it possible to have the shadow surround the entire DIV?
-moz-box-shadow: 3px 3px 3px #ccc;
-webkit-box-shadow: 3px 3px 3px #ccc;
box-shadow: 3px 3px 3px #ccc;
I know the order of attributes goes:
Horizontal offset
Vertical offset
Blur radius
Color
But I wonder if it's possible to make the shadow go all around it instead of showing up only on one edge or side.
You're offsetting the shadow, so to get it to uniformly surround the box, don't offset it:
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;
Yes, don't offset vertically or horizontally, and use a relatively large blur radius: fiddle
Also, you can use multiple box-shadows if you separate them with a comma. This will allow you to fine-tune where they blur and how much they extend. The example I provide is indistinguishable from a large outline, but it can be fine-tuned significantly more: fiddle
You missed the last and most relevant property of box-shadow, which is spread-distance. You can specify a value for how much the shadow expands or contracts (makes my second example obsolete): fiddle
The full property list is:
box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-distance] [color] inset?
But even better, read through the spec.
Just use the below code. It will shadow surround the entire DIV
-webkit-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
box-shadow: -1px 1px 5px 9px rgba(0,0,0,0.75);
Hope this will work
The CSS code would be:
box-shadow: 0 0 10px 5px white;
That will shadow the entire DIV no matter its shape!
Use this below code
border:2px soild #eee;
margin: 15px 15px;
-webkit-box-shadow: 2px 3px 8px #eee;
-moz-box-shadow: 2px 3px 8px #eee;
box-shadow: 2px 3px 8px #eee;
Explanation:-
box-shadow requires you to set the horizontal & vertical offsets, you can then optionally set the blur and colour, you can also choose to have the shadow inset instead of the default outset. Colour can be defined as hex or rgba.
box-shadow : inset/outset h-offset v-offset blur spread color;
Explanation of the values...
inset/outset -- whether the shadow is inside or outside the box. If not specified it will default to outset.
h-offset -- the horizontal offset of the shadow (required value)
v-offset -- the vertical offset of the shadow (required value)
blur -- as it says, the blur of the shadow
spread -- moves the shadow away from the box equally on all sides. A positive value causes the shadow to expand, negative causes it to contract. Though this value isn't often used, it is useful with multiple shadows.
color -- as it says, the color of the shadow
Usage
box-shadow:2px 3px 8px #eee; a gray shadow with a horizontal outset of 2px, vertical of 3px and a blur of 8px
I am using jQuery Multi Level CSS Menu #2 for one of my wordpress theme.
But when I add a CSS3 box-shadow property to my main div, for background box shadow, than the menu drop down effect becomes slow down, and is not as smooth as it supposed to be.
But when I remove, the CSS3 box-shadow property from the main div, than the menu drop down effect becomes perfectly smooth.
This is my main div:
#main { background: #fff; margin-top:20px; margin-bottom:0px; -moz-box-shadow: 0 0 10px #000000;
-webkit-box-shadow: 0 0 10px #000000;
box-shadow: 0 0 10px #000000;
}
Am I doing something wrong?
Animated shadows are very slow because they have to be recaulculated every time they move. You will see a performance improvement if you reduce the radius of your dropshadow, i.e.:
-webkit-box-shadow: 0 0 3px #000000;
But I would drop dropshadows (ha!) and use a semitransparent border instead:
border: solid #ccc 10px; /*for older browsers*/
border: solid rgba(255,255,255,0.3) 10px; /*transparent border*/