I have the following CSS which I'm using to create a simple hover effect for a handful of links in a navbar:
#k9nav-inner ul li:hover {
background-color: black;
border-bottom: 2px solid red;
}
It works, but the border at the bottom is pushing the entire bottom part of the navbar those 2px (in other words, the navbar's height is increasing by 2px during the hover), resulting in a noticeable popping effect when the mouse moves over/off of the links. I see how that would happen with the box model, but is there any way to counteract it so the 2px border appears, but doesn't stretch the navbar by those same 2px?
Figured it out:
#k9nav-inner ul li:hover a {
box-shadow: 0 -2px red inset;
}
this will stop that that from happening
#k9nav-inner ul li:hover {
box-shadow: 0 0 0 2px red inset;
}
it's not officially a border , but it looks exactly like one, and won't mess up the box-model sizing
EDIT :
for bottom border only, this will work
#k9nav-inner ul li:hover {
box-shadow: 0 2px red;
}
example fiddle http://jsfiddle.net/qVD8K/
In some cases it can be useful to leverage outline instead of border. Outline does not increase size of a parent container. However, I don't believe an outline can be set on a single side (e.g. outline-bottom).
outline: 2px solid red;
If you add a 2px border to the list elements when they are not hovered using the container's background color for the border then you won't see the 2px shift on hover.
#k9nav-inner ul li {
border-bottom: 2px solid white;
}
You could set transparent border to #k9nav-inner ul li or (which is beter in my opinion) set parent background color.
For example:
HTML:
<div class="sadf sd1">Some text here</div>
<div class="sadf sd2">Some text here</div>
<div class="sadf sd3">Some text here</div>
<div class="sadf sd4">Some text here</div>
CSS:
.sadf {margin:5px; background:#aaa; height:40px;width:150px;}
.sd1:hover {border-bottom:2px solid #000;}
.sd2 {border-bottom:2px solid transparent;}
.sd2:hover {border-bottom:2px solid #f00;}
.sd3 {border-bottom:2px solid #fff;}
.sd3:hover {border-bottom:2px solid #f00;}
Proper working examples is .sd2 and .sd3. As you can see they are not ideal but works fine for me.
See working example on JSFiddle: http://jsfiddle.net/mZg4N/
Related
I have a block of text that is outlined the way I want. Now I want a shadow effect around that outline. When I apply a box-shadow, it affects the lines, which I don't want. Is there any way to apply to the outer rim only?
https://jsfiddle.net/6nrzkodu/
div span{
font-weight:bold;
outline: 2px solid green;
box-shadow: 2px 2px 5px;
}
Here is a snippet of the shadowing outside the text I'm looking for:
So you want one outline around the block?
Try displaying it as an inline-block:
div span{
font-weight:bold;
outline: 2px solid green;
box-shadow: 2px 2px 5px;
display: inline-block;
}
Just add display:block to your element, so it will still be inline, but now it is a block of element.
You probably want to use <mark> instead of <span> for that. For HTML semantics and so...
cheers ;)
div span{
font-weight:bold;
outline: 2px solid green;
box-shadow: 2px 2px 5px;
display:inline-block;
}
I have a div with a padding and I would like to add an "internal" border, considering padding. For example, consider to have this CSS:
div#border {
padding:10px;
border:1px solid;
background-color:#ccc;
}
My goal in this case is to create an internal solid border, far 10px from div border, but I only get an external border (jsFiddle). Adding an internal div does the trick but adds an extra HTML element (jsFiddle):
div#border {
padding:10px;
background-color:#ccc;
}
div#internal {
border:1px solid;
}
I've tried to add an outline as suggested here, but when I have two adiacent divs with outline, there's an overlap between (jsFiddle).
Is there a pure-CSS solution to add an "internal" border to a div, considering padding, without adding extra HTML elements and without overlapping on adiacent divs?
Solution #1 Use box-shadow with inset
We can take advantage of the fact that multiple values can be used for the box-shadow property.
The trick here is to set the first inner shadow with the background color of the div, and the second inner shadow - which is slightly larger - with the color of the border.
FIDDLE
div#border {
padding: 10px;
box-shadow: inset 0 0 0 9px #ccc, inset 0 0 0 10px black;
background-color: #ccc;
}
<div id="border">some content</div>
Solution #2 Use outline with the outline-offset property.
outline:1px solid;
outline-offset: -10px;
FIDDLE
div#border {
padding: 10px;
outline: 1px solid;
outline-offset: -10px;
background-color: #ccc;
}
<div id="border">some content</div>
I am using bootstrap and I am changing the color of the link on hover.
The problem is when I hover there is a slight flicker which causes the navbar height to change. Any leads on how to fix it.
Here is the demo
Link has border-bottom: 4px solid white; when you hover over it.
Give your normal li the same border.
.navbar .nav>li {
float: left;
border-bottom: 4px solid;
}
How can I make border-left the same height as border-right? In other words, how to change the order of the borders? Border-left is taller than border-right. Which results in a 1px "gap".
.tab-header > ul > li
{
display: inline-block;
background-color: #ffffff;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #cecece;
border-right: 1px solid #cecece;
border-top: 1px solid #cecece;
padding: 8px;
font-size: 10px;
text-transform: uppercase;
}
What is happening, is that the css tries to make a nice diagonal colour change in the border. If you change all the 1px to 10px, you see the problem. (Image, see: http://jsfiddle.net/DaTCy/1/)
If you are using 1px widths of the borders, the bottom and the right border will always overlap in the bottom-right pixel.
EDIT: As a solution, you can try giving the bottom border a width of 0px, and solving the height problem in the container you put the button in.
The simplest solution is to explicitly use:
border-bottom-width: 0;
JS Fiddle demo.
Use border-left/-top/-right and border-bottom for different [nested] elements.
I am trying to replicate the effect I see
Currently I have http://jsfiddle.net/GWkk3/
How can I remove the border between the active li and the 2nd level nav?
Draw the border on the parent <li> elements rather than the child <ul>. Add/change these properties:
.appTabs li {
border-width: 1px 0 1px 1px; /* was 1px 0 0 1px */
}
.appTabs li.active {
border-bottom: 1px solid #EEE;
}
.appTabs li ul {
top: 25px; /* was 24px */
}
And remove this property:
.appTabs li ul {
border-top: 1px solid #CCC;
}
That gets us this far:
Now the inner border just needs to be extended all the way to the right (I'm working on that part).
Make the active tab have 1px extra bottom padding, and have a bottom margin of -1px, so it sits over the line.