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>.
Related
I've made a stackblitz for you to understand my problem.
I think it has something to do with my css for buttons...
Basically when you hit the button at the very top few pixels the state will not switch aka it doesn't detect a click
https://stackblitz.com/edit/angular-qiq87e
Just remove this css style and it will work perfect .
button:active {
/* margin-top: 1%; */ //remove it
margin-bottom: 5%;
-webkit-box-shadow: inset 10px 10px 5px -8px rgba(0,0,0,0.75);
-moz-box-shadow: inset 10px 10px 5px -8px rgba(0,0,0,0.75);
box-shadow: inset 10px 10px 5px -8px rgba(0,0,0,0.75);
}
i am using the following code to make a shadow inside a div tag..
box-shadow: inset 0 10px 10px -10px #000 , inset 0 -10px 10px -10px #000;
but i get shadows on the top and bottom.. i only want the shadow to appear on top not the botton something like the following picture..
i'e been tinkering with the codes for hours but nothing... how can i do this. thanks.
Like this?
box-shadow: inset 0 10px 20px -15px #000;
DEMO
You need to delete the part after the comma.
box-shadow: inset 0 10px 10px -10px #000;
http://jsfiddle.net/9LzV4/
-webkit-box-shadow:inset 0 3px 5px 0 #E3E3E3;
box-shadow:inset 0 3px 5px 0 #E3E3E3;
for more experiments go to css3 generator
-webkit-box-shadow: inset 0px 6px 16px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,0.75);
Demo
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/
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.
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;