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.
Related
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.
On my nav bar there are two nav links with rounded borders, which when they are hovered, the border size doubles. I can't get it to work without the nav link moving on hover and the hover border doesn't match the area of the original border. I'm sure it has to do with padding but I've tried everything I can think of. See example code - http://jsfiddle.net/mGjs6/3/
You need to change
#signup a:hover
to
#signup:hover
and remove the width
#signup:hover {
border: solid 2px #55971e;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Example: http://jsfiddle.net/jasongennaro/mGjs6/6/
Same with #clientarea
The issue with the not matching up was the one element #signup had the border but then you were changing the border of a child element (a) on hover.
EDIT
As per the comment
However when you hover, the text still moves to adjust for the
increased border. The text needs to remain fixed with only the border
changing.
That happens because the border size is increasing. That is what is pushing the text down a pixel (that's the increase in border size)
You can't fix that perfectly. Better to change the color of the border or the background.
Example 2: http://jsfiddle.net/jasongennaro/mGjs6/9/
(Hover over both to see the suggestions)
EDIT 3
I figured it out: decrease the padding by a pixel on the hover and it all works
#signup:hover {
border: solid 2px #55971e;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding:3px 4px; //ADD THIS
}
Example 3: http://jsfiddle.net/jasongennaro/mGjs6/10/
I want the arrow that appears when a div is hovered here to also drop a shadow. The arrow is drawn from CSS:
.arrow {
position:absolute;
margin-top:-50px;
left:80px;
border-color: transparent transparent transparent #ccff66;
border-style:solid;
border-width:20px;
width:0;
height:0;
z-index:3;
_border-left-color: pink;
_border-bottom-color: pink;
_border-top-color: pink;
_filter: chroma(color=pink);
}
The shadow setting I want to apply is:
-moz-box-shadow: 1px 0px 5px #888;
-webkit-box-shadow: 1px 0px 5px #888;
box-shadow: 1px 0px 5px #888;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888');
The problem in just pasting the shadow setting into the arrow is that the shadow applies to the entire span box and results in a box shadow instead of an drop shadow for the arrow.
P.S. I want to try as much as possible to not use explorercanvas, since I'm trying to minimize script tags in the html. However, if its a must please do provide the code.
Applying the box shadow to the css border triangle will not work, it will only ever apply it to the whole element box.
You can achieve what you are trying to do by changing your css border triangle into a square div, rotating it 45 degrees using css3 and then applying the box-shadow
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
Edit:
Updated
Edit:
See the link below for another approach using css content and :after
http://css-tricks.com/triangle-with-shadow/
I haven't tested other browsers, but I noticed that CSS Arrow Please uses a neat little trick
Using this syntax on the parent box will also add a dropshadow to the generated "arrow":
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
But using this syntax will not?:
-webkit-box-shadow: 2px 3px 8px 0px rgba(0, 0, 0, 0.04);
Credit to Blowsie for the original answer that led me to the following implementation. Here is a working jsfiddle implementation for Chrome. The relevant CSS:
/* Make an arrow */
.arrow{
background-color: pink;
box-shadow: 3px 3px 4px #000;
width: 30px;
height: 30px;
/* Translate the box up by width / 2 then rotate */
-webkit-transform: translateY(-15px) rotate(45deg);
}
Caveat
If the content of your box overlaps the arrow then the illusion is broken. You might try working around this by changing the z-index of the arrow to be behind the box but this will cause the box drop-shadow to be rendered on top of the arrow. Add sufficient padding to the box content so that this doesn't happen.
I’m afraid drop shadows only apply to the element box, rather than the angle of the border corners. If you want an arrow like this with a drop-shadow, I’m afraid you’ll have to make it as a PNG image, with the drop shadow in the image.
CSS generally only produces square boxes. The border trick to make a pointy arrow here with CSS is a clever hack.
Another way to achieve arrow with shadow, which will work for all the browsers is to use html triangle character in unicode.
HTML:
<span class="arrow">▶</span>
CSS:
.arrow {
color: red;
text-shadow: 0 0 20px black;
transform: scaleY(1.4)
}
Since that is rendered as regular text you may apply the text-shadow property. For customize the arrow dimensions (want to add extra width or height or skew the arrow) css3 transform property is the key.
Here is reference with html characters: http://www.copypastecharacter.com/graphic-shapes
Enjoy