I have the following box shadow css on my site. It looks great in Chrome, but Firefox and IE do not recreate the effect I'm looking for. I want a white solid shadow only on the bottom of a box. How do I make this work for all browsers?
box-shadow: 0px 10px -14px 14px #FFF;
-webkit-box-shadow: 0px 10px -14px 14px #FFF;
-moz-box-shadow: 0px 10px -14px 14px rgb(255, 255, 255);
Use this article or this code:
-moz-box-shadow: 13px 13px 0px 0px #FFFFFF;
-webkit-box-shadow: 13px 13px 0px 0px #FFFFFF;
box-shadow: 13px 13px 0px 0px #FFFFFF;
I've got it working in IE9 and FF by simply removing the vendor prefix lines. All you should need is:
box-shadow: 0px 10px -14px 14px #FFF;
You have a negative value for the shadow size:
box-shadow: 0px 10px -14px 14px #FFF;
A negative 14px shadow would be nothing, as it would be less than it having a size of 0. If you're looking for an inset shadow, simply add that to the style:
box-shadow: inset...
Solution, change -14px to 14px.
Related
I'm using this css code
.result{
background-color: #aaa;
text-align: center;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
font-size: 22px;
text-shadow: 0px 0px 4px 3px #000;
}
But the text shadow is not working the Inspector show that the value property is not valid,Do I missed something?
text-shadow shorthand only has 4 properties: X offset, Y offset, blur & Color.
text-shadow: 2px 2px 4px #333;
This is different from box-shadow which has: X offset, Y offset, spread, blur & color.
box-shadow: 2px 2px 0px 4px #333;
(would look the same as above)
text-shadow can only take 3 values except color. Should be like this:
text-shadow: 0px 0px 4px #000;
CSS Syntax
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
change to text-shadow: 0px 0px 4px #000;
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>
How can I made inner border with different values each? For example:
Top: 20px
Right: 80px
Bottom: 40px
Left: 10px
Example that what I want made...
Thank you. :)
To make it an inner border, use two box-shadows on the element, separated with a comma, and use negative values on the second set.
Like this:
box-shadow: inset 10px 20px 0px #000, inset -80px -40px 0px #000;
Here is a jsfiddle demo: http://jsfiddle.net/dr_lucas/23Egu/326/
This is the cross-browser compatible CSS:
-webkit-box-shadow:inset 10px 20px 0px #000, inset -80px -40px 0px #000;
-moz-box-shadow:inset 10px 20px 0px #000, inset -80px -40px 0px #000;
box-shadow:inset 10px 20px 0px #000, inset -80px -40px 0px #000;
Note that if you need it to be compatible with old IE versions that don't support box-shadow, you can use CSS3pie:
http://css3pie.com/
Hope this helps.
You can do it by using box-shadow
Here is an example how i've used it
Inner border: Do you mean padding?
If so:
padding: 20px 80px 40px 10px; // top left bottom right
Else if you really meant border then:
border-top: 20px solid #color;
border-right: 80px solid #color;
border-left: 10px solid #color;
border-bottom: 40px solid #color;
It can be achieved via CSS3 box-shadow also
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/
Please take a look at this test website. I've applied box-shadow around the containers in header and on the main content area. Can somebody tell me if it's possible to bring the shadow a little down on the header so there is no gap in between them? (see the screen shot)
I think this is as close as you can get:
box-shadow: 6px 10px 4px -4px #222222, -6px 10px 4px -4px #666666;
Just move the header shadows a bit down so they will blend with the content box shadow.
try this
.banner > .container {
-webkit-box-shadow: 6px 8px 4px -4px #222 , -6px 8px 4px -4px #666;
box-shadow: 6px 8px 4px -4px #222 , -6px 8px 4px -4px #666;
margin-top: 20px;
}
You should create a container <div> to wrap around everything you want with a box-shadow, then apply the box-shadow only to that <div>.