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);
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 planed to add an image below a div. It would be below a navigation bar (div), adding some nice shadow effect (img). Looks like this:
<div>...</div>
<img>
So far it is just in the html code, but I want to keep the html code since it's a theme that gets updated frequently. So I want to alter only the CSS.
Is there a way to do that without altering HTML code, just using CSS?
Two suggestions:
Add the shadow image as a 1px x Xpx repeating background image to the bottom of your nav DIV. So it would sit within the nav DIV. Simply add some padding to the bottom of the NAV DIV to accomodate it e.g.
nav {
padding-bottom:6px;
background:url(images/nav-bg.png) repeat-x 0 bottom;
}
(The above code would presume you have a background image which is 6px in height and probably 1px wide (but that's up to you) and the path would obviously have to be adjusted to be where your actual image was located.
Instead of adding an IMAGE under the NAV DIV add another DIV and once again add a 1px x Xpx shadow image to that DIV through the CSS.
you cant change the source of an image element through css...
you could create the shadow using CSS tho:
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
or you could change the image through javascript or from the codehind
javascript: $(element).src = "path to new image";
I'm looking at making a trapezium with a box shadow that's 10px wider at the top than the bottom. In the past I've made a trapezium as outlined in the following jsfiddle, but you'll notice that if I put a box-shadow onto the element it boxes the outerWidth in a rectangle, rather than putting a shadow on the slanted border:
#trapezium {
margin:20px auto;
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
box-shadow:0 0 10px #333;
}
http://jsfiddle.net/YhePf/8/
My initial thoughts would be to use something along the lines of:
-webkit-transform:perspective(100) rotateX(1deg);
Something like that. While this certainly begins to resolve the issue, I'm not sure what the number 100 refers to in 'perspective', and how I could calculate a formula that would make sure the top width was precisely 10px wider than the bottom, regardless of how high or wide this element is.
Any tips? Or a third option to pull this off?
What you've built isn't a trapezoid (aka trapezium) -shaped element; it's a rectangle-shaped element where the border styling creates the appearance of a trapezoid. This is why the box-shadow is rectangular.
Using the proprietary -webkit-transform property wouldn't change the shape of the actual element.
To create a truly non-rectangular element, you'll need to use SVG. See Multi-Shaped CSS Layers \ Non-rectangular CSS Layer or non-rectangular hoverable area.
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;