I have an element that has inset box shadows, but I want the shadow on only the top.
Is there no way to set only the top shadow? Do I have to resort to creating additional elements to overlay the side shadows?
This is technically the same answer as #ChrisJ, with a few more details on how to make box-shadow do your bidding:
for reference the * items are optional:
box-shadow: <inset*> <offset-x> <offset-y> <blur-radius*> <spread-radius*> <color*>;
The <spread-radius> needs to be negative <blur-radius> (so that none of the other blurred sides show up), and then you need to bump the <offset-y> down by the same amount:
box-shadow: inset 0 20px 20px -20px #000000;
It will give you a single gradient band across the top of the element.
box-shadow offsets the shadow by a given amount in each direction. So you need x-offset to be 0, and y-offset to be something negative.
Additionally, you have to play with the blur-radius and spread-radius so that the shadow is not visible on the left and right sides.
Example:
box-shadow: #777 0px -10px 5px -2px;
See the description on the Mozilla Developer Network.
A better way would be using a background gradient, here are both side to side.
http://jsfiddle.net/wh3L8/
Example:
box-shadow: 0 2px 0px 0px red inset;
The First parameter and second parameters specifies the offset of shadow to x-direction and y-direction respectively.
Third parameter specifies the blur distance.
Finally, the fourth parameter specifies the spread distance.
Specifying only the second parameter with the offset you want gives the top shadow without side shadows.
Demo can be found here: http://jsfiddle.net/rEdBy/
A very nice tutorial on CSS3 Box shadows - http://www.css3.info/preview/box-shadow/
Here is my example please try once
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
Here's a little hack that I did.
<div id="element"><!--element that I want an one-sided inset shadow from the bottom--></div>
<div class="one_side_shadow"></div>
Create a <div class="one_side_shadow"></div> right below the element that I want to create the one-side box shadow (in this case I want a one-sided inset shadow for id="element" coming from the bottom)
Then I created a regular box shadow using a negative vertical offset to push the shadow upwards to one-side.
box-shadow: 0 -8px 20px 2px #DEDEE3;
Maybe try using box-shadow:
box-shadow: h-shadow v-shadow blur spread color inset;
with overflow-x:
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
use overflow-x: hidden; and box-shadow: 0px 10px 16px -10px #000;
Related
I am customising and Ant Design table with scss and want to add a box shadow when hovering a table header cell. With the following code, the element is surrounded on each of the four sides of the element by a 1px green solid border, but the box shadow only ever shows up on the left hand side of the element, outside of it:
.ant-table-thead>tr>th:hover {
box-shadow: 0 0 6px green !important;
border: solid 1px green !important;
transition: 0.5s;
background: #E8F8F5;
cursor: grab;
}
Here's what it looks like:
How can I add the box shadow to every side of the element, inside and out? I have tried to make it work but I am missing something. TIA.
Try using an offset. For example:
box-shadow: 2px 2px 6px green
This should help.
Also, I'd not recommend using !important in your CSS, as it can cause problems.
I have a simple frame.
Code I use for borders:
box-shadow: 0px 0px 0px 5px #E1E1E1;
Every other element looks okay, but this one kinda acts weird. Only top border.
.frame {
height: 585px;
}
.frame:hover {
box-shadow: 0px 0px 0px 5px #E1E1E1;
}
<div class="frame" background-image:url(...png)>
...
</div>
First : background-image:url(...png) is not correct, you need to wrap it into a style attr if you want inline styling, so style="background-image:url(...png)" is correct. (also image path should be a valid one)
Second : The border is 5px tick and appears only on hover, by default it will add height/width to the element, if you want to keep the size of the image on hover you should think of using a box-shadow: inset 0p 0p 0p 5px #E1E1E1; Also if you are wondering why it looks like a border instead of a shadow, see this: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp . You are setting a blur of 0px s0 that's why.
Hope it helps!
I have this site here:
http://artendijen.com/susan_dev/
and I have a box-shadow around my nav box, I am looking to have the shadow a bit smaller, a color that looks more like a shadow and all around, except for the left side, just the top, bottom, and right side. Is this possible?
box-shadow: 10px 10px 5px #000;
The syntax of the box-shadow is like this (ignoring inset and spread):
box-shadow: <offset-x> <offset-y> <size> <color>;
So to have the shadow smaller, decrease the size.
To have the shadow at a different position, change the offsets.
For a more realistic color try a more transparent color.
This for example would give a result like you want it:
box-shadow: 5px 0px 3px rgba(0,0,0,.5);
I have a wordpress site I'm working on and I'm needing to add CSS3 drop shadows to four elements. Content-menu-wrapper is independent of the other divs (not graphically connected) and is functional.
Next divs are content wrapper, footer, footer-bottom. Each div is graphically 'connected' one on top of the other. Content-wrapper needs shadow on top, left and right. Footer needs shadow on left and right. Footer-bottom needs shadow on left, right and bottom.
When I try editing the shadow to "test", the shadow simply disappears. Most likely I'm using the code wrong. Below is the functioning code for content-menu-wrapper.
CSS :
#content-menu-wrapper
{
background-color: white;
margin:0px auto 15px auto;
height: 32px;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}
Please help me with the code for the other three divs. Thank you.
Left and right is easy:
box-shadow: -15px 0 15px -15px rgba(0, 0, 0, 0.6),
15px 0 15px -15px rgba(0, 0, 0, 0.6);
Getting three sides to look good however is really hard as using the above technique there are gaps in the corners.
My suggestion would be to enclose all the elements in a wrapping div and apply the box-shadow to that. Keeps the CSS much cleaner and is easier to pull off.
Use this online tool to get the css for the shadow for your divs.
I was able to fix this problem by wrapping the content and footer divs within a larger div per jimjimmy's answer above. These are the details: First I created a new div id in common.css, "content-shadow".
Then I added the box-shadow attribute plus copy/paste attributes from my content-wrapper div so the site would format correctly. In my case it looked like this:
#content-shadow {
border-left:0px solid #E7E7E7;
border-right:0px solid #E7E7E7;
border-bottom:0px solid #E7E7E7;
border-top:0px solid #E7E7E7;
background-color:#FFFFFF;
margin:0px auto 0px auto;
margin-bottom:0px;
margin-top:0px;
width: 1000px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}
Next I placed a div in the header.php file of my theme before the "content-wrapper" div. Saving that file I moved to the footer.php file and placed a tag at the end of the file in the appropriate place. For me this was above "content-bottom-empty-space" div so I could have a little space on the bottom of my site.
Save the file and now it will/should propagate throughout wordpress. I hope this helps somebody in some way.
I tried to find solution (tricks) how to use box-shadow on left, right and bottom. I can only manage to find left, right and bottom at CSS3 Box Shadow on Top, Left, and Right Only.
I tried to change the value base on that, but unfortunately, it didn't work out. So if anyone has the solution already, please kindly provide it. Thank you.
With Regards,
Sorry everyone,
I just found out the answer by using the following code.
-moz-box-shadow: 0px 3px 8px rgb(100,100,100);
-webkit-box-shadow: 0px 3px 8px rgb(100,100,100);
box-shadow: 0px 3px 8px rgb(100,100,100);