how to make a shadow on the top of the DIV only, using Box-Shadow using css3 ?
I want to modify this css3 code .. to do that
box-shadow:0px 0px 45px #08C;;
-webkit-box-shadow: 0px 0px 45px #08C;
-moz-box-shadow: 10px 10px 10px 10px 15px #08C;
You don't need the prefixes for box-shadow anymore, actually. Plain box-shadow works in the newer browsers.
Anyhow, the syntax is (for example):
box-shadow: 0px -12px 12px -7px black;
Where 0px is x, -12px is y, 12px is the amount of blur and -7px is the spread. It's spread that allows you to create this effect.
See it in action at: http://jsfiddle.net/c6QLC/
Related
I would like to put a shadow on the header image but it didn't work.
URL: http://testjeanschwartz.weebly.com/
I already try something like this:
.wsite-background
{
box-shadow: 0px 10px 5px #888888;
}
Putting a shadow is something I already did a lot of times but this one is not working.
Thanks.
Your box-shadow is covered by the elements that follow it (namely #main-wrap). You can change the z-index of your element to have it show 'above' other elements.
You will need to position your element something other than static for the z-index to be acknowledged:
.wsite-background {
box-shadow: 0px 10px 5px #888888;
position: relative;
z-index: 1;
}
For background image, you need inset property to handle it with the position relative or absolute.
Try this one:
.wsite-background{
position:relative;
-webkit-box-shadow: inset 0px 10px 5px #888888;
-moz-box-shadow: inset 0px 10px 5px #888888;
box-shadow: inset 0px 10px 5px #888888;
}
I use css3 in my web projects but i don't know how to set a inset little shadow on the top of the box ? I tried to set this following code for ex :
box-shadow:inset 0px 0px 10px #fff
Thanks
How about something like this:
box-shadow: inset 0px 10px 10px -2px #FFF;
JSFiddle
Got a problem with the css shadows.
I can't figure out how to get rid of the top shadow here: http://i.imgur.com/5FX62Fx.png
What I got:
box-shadow: 0 -3px 4px -6px #777, 0 3px 4px 6px #ccc;
How do I do that? I want it to be on the left, right and bottom side.
try this is:
div
{
width:300px;
height:100px;
background-color:white;
box-shadow:0px 0px 5px #888888;
}
try like so:
box-shadow: 3px 3px 3px #777, -3px 3px 3px #777;
(adjust hex colours to match your needs)
Example - http://jsbin.com/ebemol/1
Looks like you need to position the vertical shadow property:
box-shadow: 0 5px 4px -6px #777
-3px would indicates that the shadow starts -3px from where the shadow would start normally, I have changed it to an arbitrary value, 5px so it starts further down.
http://jsfiddle.net/9Dgtj/
You can see from the JS Fiddle I have provided that adjusting the vertical shadow (5px) moves the shadow down.
I have this class here and I using box-shadow which works fine, but it only shows the shadow on 2 sides, is there away to get the shadow on all four sides?
Thanks,
J
.contactBackground{
background-color:#FFF;
padding:20px;
box-shadow: 10px 10px 10px #000000;
}
If you set the offsets to zero, the shadow will be equal on all four sides.
.contactBackground{
background-color:#FFF;
padding:20px;
box-shadow: 0 0 10px #000000;
}
Box-Shadow
CSS3 box-shadow property has following attributes: (W3Schools)
box-shadow: h-shadow v-shadow blur spread color inset;
In your example you're offsetting shadow by 10px vertically and horizontally.
Like in other comments set first two values to 0px in order to have even shadow on all sides.
More on Shadows
The main prefix for shadow to support latest browsers is box-shadow.
There are 2 other ones that I recommend to use for older Mozilla and Webkit:
-moz-box-shadow
-webkit-box-shadow
Also, by using rgba instead of hex color value you can set the alpha/opacity of the shadow:
box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.3);
Remove the offset definitions, and use only the blur radius (the third argument):
.contactBackground{
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px #000;
}
Try: box-shadow: 0 0 10px 10px #000000;
you need to specify box-shadow: 10px 10px 10px 10px BLACK;
Right, Bottom, Left, Top
or you could say box-shadow-top: 10px BLACK; etc
I have an button just as have Ask Question on SO and here is the CSS for it:
.rfs .grey_btn{
float: right;
margin: 15px 5px;
}
Now I have to add border shadow to it and I have tried border-radius and box-shadow but it does not give me proper result.
Also other question is that I have a label or box say and now I want to increase size of that box so that I have move the text inside that box to right, currently if I move it to right than it reaches the end limit of box and so I want to increase the size of box so that I can push text more towards right.
Hope I have made my question clear. Any guidance would be highly appreciated.
Thanks.
The box-shadow property is not yet widely supported, but can be implemented like:
img {
-webkit-box-shadow: 5px 5px 10px #666;
-moz-box-shadow: 5px 5px 10px #666;
box-shadow: 5px 5px 10px #666;
}
Not sure what you're asking about the label/box?
Box-Shadows only work in some modern browsers as they are CSS3 properties. How to use them correctly, you can see here: http://www.css3.info/preview/box-shadow/
You could use a background image for the shadow effect or you could use a second tag (like a span) with a border, but that's a very uggly solution.
For you label question: have you tried to add a "pagging-left" which will move your text to the right side and increases the width of the label?
EDIT: As CSS3 is not final, every browser has his own pseudo-css3-property. Adding a shadow and extra width and space to the SO button you might use these CSS properties in modern browsers:
.nav a {
-khtml-box-shadow: 10px 10px 5px #888888;
-webkit-box-shadow: 10px 10px 5px #888888;
-moz-box-shadow: 10px 10px 5px #888888;
box-shadow: 10px 10px 5px #888888;
padding-left: 35px;
}
EDIT: Added the CSS for Safari and KHTML browsers. That would result in something like this:
.rfs .grey_btn
{
-webkit-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-khtml-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-moz-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
-o-box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
box-shadow:rgba(0,0,0,0.7) 0px 5px 15px, inset rgba(0,0,0,0.15) 0px -10px 20px;
}