I'm creating multiple borders to element using box-shadow, but they don't show at Webkit. What's wrong with this code? I'm using this four times to create shadow on each side, then border for extra border
box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
Martti Laine
to display box-shadow in webkit browsers you have to use the following statement at the moment:
-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
To make it compatible with most modern browsers use this:
-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
This works well enough, but please note that best practice is to place the non-proprietary declaration last.
-webkit-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
box-shadow: 1px 1px 0px rgba(0,0,0,0.1);
Related
im try to get vrticl line Under the arrow.
for the horizental line i used .
webkit-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.99);
-moz-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.99);
box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.99);
If you're specifically wanting to use box-shadow, you can use the first property in the box-shadow shorthand, which adjusts the horizontal offset:
webkit-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.99);
-moz-box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.99);
box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.99);
But given you're not using box-shadow to get a shadow effect (i.e. not using blur or spread), a border might be preferable, as it'll give you the same divider look you're after, but will be repositioned if you adjust the padding between your cells. You can do away with your browser prefixes too:
border-right: 3px solid rgba(0,0,0,0.99);
border-bottom: 3px solid rgba(0,0,0,0.99);
Use box-shadow: 5px 0 2px -2px rgba(0,0,0,0.99);
This sets the X offset more to the right.
I am using box-shadow but it makes the whole container wrapped with shadow, how can I make a shadow only in the inside (top center) box?
Have you tried INSET this will put a shadow on the inside of an element.
.shadow{
box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
-webkit-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
-moz-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
-o-box-shadow: inset 0px 0px 10px 0px #ABABAB,5px 5px 5px 1px #DDDDDD;
}
Hello I want to use box shadow for div.
Any idea how to do that ?
I have use
box-shadow: 3px 3px 5px 6px #ccc;
but not working in firefox.
Use :
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
following documents shows it perfectly :
1
2
3
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Certain versions of Firefox may still require the use of the -moz prefix. Could that be the issue?
-moz-box-shadow: 3px 3px 5px 6px #ccc;
This looks fine to me
-moz-box-shadow: 3px 3px 3px 3px #cccccc;
box-shadow: 3px 3px 3px 3px #cccccc;
Try this:
-moz-box-shadow: 3px 3px 5px 6px #ccc;
Check the MDN for reference
if you want to using in mozilla using tag -moz-box-shadow:.. if chrome using tag -webkit-box-shadow:.. or in opera using tag -o-box-shadow:... for more details open
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_image_gallery
for inner box-shadow use this
-moz-box-shadow: inset 0 0 10px #f00;
-webkit-box-shadow: inset 0 0 10px #f00;
box-shadow: inset 0 0 10px #f00;
And for outer box-shadow use this
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
box-shadow:3px 3px 5px 6px #ccc;
-webkit-box-shadow:3px 3px 5px 6px #ccc;
-moz-box-shadow:3px 3px 5px 6px #ccc;
-o-box-shadow:3px 3px 5px 6px #ccc;
-ms-box-shadow:3px 3px 5px 6px #ccc;
Use this code useful for you.
Please use -moz- prefix for older version of firefox.
-moz-box-shadow: 3px 3px 5px 6px #ccc; /*will work only in firefox*/
box-shadow: 3px 3px 5px 6px #ccc; /*will work on all browser and latest firefox also*/
Check it out here.
Just use it: http://css3gen.com/box-shadow/
It saves a lot of time.
How could you eliminate the top box-shadow. It would be perfect if CSS had something already built in, but anything rarely is.
Here's a live example.
Scroll down to the bottom of the page to the footer. I want to eliminate the top box-shadow on the pseudobottom.
Thanks
Use this:
#Background
{
-webkit-box-shadow: 0px 1px 30px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 30px rgba(0,0,0,.4);
box-shadow: 0px 1px 30px rgba(0,0,0,.4);
}
Apply this CSS to your #wrapper2
#wrapper2{border-radius: 0 0 12px 12px;
-webkit-border-radius: 0 0 12px 12px;
-moz-border-radius: 0 0 12px 12px;
}
This will solve your design and give the same output that you have desired by including a div with pseudobottom class.
Further, I am also curious to know the purpose of including a div with pseudobottom class. Is it just to resolve the design or it will have the contents too?
Used to this add one more box shadow for top and bottom Shadow
*as like this*
.container-wide{
-webkit-box-shadow: 1px 1px 1px 1px #ccc, -1px -1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc, -1px -1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc, -1px -1px 1px 1px #ccc;
}
If u show only top shadow than apply this css
.container-wide{
-moz-box-shadow: -1px -1px 1px 1px #ccc;
-webkit-box-shadow: -1px -1px 1px 1px #ccc;
box-shadow: -1px -1px 1px 1px #ccc;
}
I've added both outline and box-shadow to a div in my CSS code.
The div looks great on Chrome and IE but not in Firefox:
Chrome and IE:
http://i.phirune.com/csrjfyqoczob
FireFox:
http://i.phirune.com/4gsrrub3ww6e
The CSS code is as follows:
#container {
width:960px;
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
margin-top:-10px;
background-color: #415475;
-moz-box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
box-shadow: 0 0 25px 25px rgba(0,0,0,0.2);
outline:#000000 solid thick;
}
I have no idea how to fix this, any insight will be appreciated.
Why not use multiple box-shadows? Just separate your box-shadows by commas.
box-shadow:
0px 0px 0px 1px #fff,
0px 0px 0px 2px #606054,
0px -1px 9px 1px rgba(119, 119, 119, 0.4);
You can add as many has your heart desires.
This is a Firefox bug. You can only get around it. The ticket is still live, you may see at: https://bugzilla.mozilla.org/show_bug.cgi?id=480888
-moz-box-shadow: 1px 1px 10px #00f;
-webkit-box-shadow: 1px 1px 10px #00f;
box-shadow: 1px 1px 10px #00f;
What browser versions are you attempting to support? Modern browsers support css3 and you don't need to do the css hacks.
here's some css3 documentation for drop shadows: http://www.css3.info/preview/box-shadow/