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.
Related
div{
height:100px;
width:100px;
background:pink;
box-shadow: 0px 0px 0px 3px #000;
}
Above css worked but when I do box-shadow: inset 0px 0px 0px 3px #000; is wasn't work, I also tried box-shadow: 0px 0px 0px 3px #000 inset. Any idea?
try it with smaller number of parameters:
box-shadow: inset 0px 0px 3px #000;
or with specified engine:
-moz-box-shadow: inset 0px 0px 10px #000000;
-webkit-box-shadow: inset 0px 0px 10px #000000;
box-shadow: inset 0px 0px 10px #000000;
The syntax of box-shadow property is as follows:
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
You are not setting any value to h-shadow and v-shadow. That is why you are not able to see a shadow.
Try this code
div {
box-shadow: 10px 10px 5px #888888;
height: 100px;
width: 100px;
}
<div>
</div>
box-shadow: 3px 3px 6px 6px;
this property is working in chrome firefox IE but not in safari 5 browser
I tried writing like this but it isn't working
-webkit-box-shadow:3px 3px 6px 6px;
-webkit-appearance: none;
-webkit-box-shadow: 3px 3px 6px 6px #addacolor;
box-shadow: 3px 3px 6px 6px #addacolor;
you haven't defined color here (box-shadow: h-shadow v-shadow blur spread color inset;)
<color> If not specified, the color used depends on the browser - it is usually the value of the color property, but note that Safari currently paints a transparent shadow in this case.
so define color for safari
-webkit-box-shadow: 3px 3px 6px 6px #color_you_want;
For reference, I had a similar problem with this box-shadow :
box-shadow: 0 0.06rem 0 0 rgba(44, 43, 63, 0.1); (very small shadow!)
It was working in other browsers except for Safari(v.8) who didn't show that shadow. I had to increase the value.
Have you tried with
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
#example1 {
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
http://www.css3.info/preview/box-shadow/
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;
}
How to show only right and bottom parts of a shadow?
I know box-shadow can set a bottom. but how to set in -webkit-box-shadow and -moz-box-shadow?
box-shadow-bottom: 0px 4px 4px black;
The same way I am pretty sure:
-moz-box-shadow: 10px 10px 5px #222;
-webkit-box-shadow: 10px 10px 5px #222;
box-shadow: 10px 10px 5px #222;
box-shadow:
first argument: bottom offset, second: right offset, third: blur, fourth: color
for -moz and -webkit it's the same. So for a bottom right shadow of 4px with 4px blur:
-moz-box-shadow-bottom: 4px 4px 4px black;
-webkit-box-shadow-bottom: 4px 4px 4px black;
box-shadow-bottom: 4px 4px 4px black;
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);