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
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/
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;
}
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.
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/
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;
}