I'm new to HTML/CSS, and I'm learning Bootstrap.
I'm coding a Bootstrap navbar and I have a small difficulty, here's a fiddle of the work I have done.
In the HTML code there is the normal markup that goes into building a TWBS navbar, and I have added code to change the color of the active tab:
.navbar-nav a.active {
-webkit-transition: .2s;
-o-transition: .2s;
transition: .2s;
border-top: 2px solid #212121;
}
Problem: The text wrapped within the<a> tag is now slightly pushed down and I am noticing that the border-top CSS property functions more like a margin-top property.
How do I avoid this and create a border that doesn't add the margin?
You can style :before pseudo element of the active a and position it relatively to the parent element:
.navbar-nav a.active:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
Demo: http://jsfiddle.net/djuj5jte/5/
You could use an inset box shadow:
box-shadow: inset 0px 3px 0px 0px #212121;
This has the benefit of not changing the elements size OR requiring a pseudo element but sadly isn't supported in <=IE8 ;(
See: http://jsfiddle.net/djuj5jte/3/
You can add
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
so that the border will be part of the element width.
Useful link: https://css-tricks.com/box-sizing/
Related
I'm messing around with CSS animations with pseudo elements for the first time.
I have a button that I want a ripple effect on click, without javascript. I'm almost there, but my button's ':before' element keeps setting itself to the width of the container rather than the width of the button.
Is there any way that I can set the dimensions of the buttons ':before' to the dimensions of the button without JavaScript? Also, I'm having trouble with the actual positioning of the :before element, ideally I would like it to perfectly overlap with the button's border. So any advice with that would help a lot!
Here's the codepen (uses sass): https://codepen.io/NotDan/pen/qvKvQv
the effect is working the way I want it to, it's just the alignment and sizing of the :before element that I need help with
Here's the css:
.custom-btn-primary {
display: block;
background: rgba(0, 0, 0, 0);
color: #d98324;
border: 2px solid #d98324;
padding: 0.5rem 1.5rem;
text-transform: uppercase;
transition: all 0.5s ease-in-out;
}
.custom-btn-primary:hover {
color: #e5a864;
border: 2px solid #e5a864;
transition: all 0.5s ease-in-out;
}
.custom-btn-primary:before {
content: "";
background-color: rgba(0, 0, 0, 0);
border: 2px solid #d98324;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.custom-btn-primary:focus {
outline: 0;
background-color: #d98324;
color: #230007;
font-size: calc(1em + 2px);
border: 0;
}
.custom-btn-primary:focus:before {
animation: ripple-out 0.5s ease-out;
}
Here's the html:
<div class="row">
<div class="col-12 col-md-4">
<button class="custom-btn-primary">primary</button>
</div>
<div class="col-12 col-md-4">
<button class="custom-btn-secondary">secondary</button>
</div>
<div class="col-12 col-md-4">
<button class="custom-btn-light">light</button>
</div>
</div>
I played around with your codepen and found that you just need to add position: relative; to your .custom-btn-#{$color} class.
Your :before pseudo element is already position: absolute but it’s currently positioning itself to the column instead of the button itself.
I have a simple css transition on the right property for a button which simply moves an arrow when you hover. The problem is that when you hover, it's not transitioning properly and if you refresh (or re-run) the JSFiddle, then you will notice that the arrow moves position after hovering.
It's like it moves back, then forwards then back again?
This appears to only happen in Firefox.
JSFiddle
Found the problem. Your span is inline, and giving it position: relative caused the issue.
Simply change to inline-block and you're good to go:
.genericBtn span {
display: inline-block;
position: relative;
}
How about using a more subtle approach by using CSS pseudo elements:
.genericBtn {
background: #ffffff;
color: #c40009;
border: 1px solid #c40009;
font-size: 20px;
margin: 10px 0 0;
padding: 20px 50px 20px 30px;
width: 300px;
position: relative;}
.genericBtn::after {
content: ">";
position: absolute;
right: 37%;
transition: all .3s ease-in;
}
.genericBtn:hover::after {
transform: translate(10px,0); }
Here is a Fiddle
I'm creating a function where you hover over a div, which will result in another div appearing; a simple, CSS-only pop-over.
However, whenever the pop-over-div has an opacity:0, it still has a physical height and width, rendering other divs under the pop-over unreachable.
I know I can work with display:none and display:block, but this will remove the possibility of adding a smooth "arrival" of the div; it'll just pop in and out of the screen.
The question: Is there a way to remove the physical dimensions of a div with opacity:0?
In my JSfiddle, you will notice you can get the .iconhover to appear when you hover over the H or e. If you hover over the rest of the word, you're officially hovering over .iconhover and not .wishicon, resulting in the pop-over not showing up.
I hope my question is clear enough.
HTML
<div class="qs">
<div class="wishicon">Hello world</div>
<div class="iconhover">Hovering...</div>
</div>
CSS
.iconhover {
height: auto;
width: 100px;
margin-left:-0px;
color: #fff;
background-color: #666;
box-shadow: 0 1px 0px rgba(0,0,0,1), 0 2px 0px rgba(0,0,0,1), 0 2px 10px rgba(0,0,0,.5);
margin-top:-20px;
margin-left: 20px;
border-radius: 5px;
opacity: 0;
font-size: 12px;
line-height: 1.5em;
font-weight: normal;
transition: opacity 0.5s, margin 0.5s;
-webkit-transition: opacity 0.5s, margin 0.5s;
padding:4px 20px;
text-align: center;
position:absolute;
float: left;
}
.qs > .wishicon:hover + .iconhover {
opacity: 1;
margin-top: -20px;
margin-left: 20px
}
I have a terrific solution which I use often.
On the element with opacity: 0 put pointer-events: none.
It will still have the dimensions, but it will be as if all events are inactive.
Then when you want it to be opacity: 1, return pointer-events to auto.
This is the next best thing to using display: block/none but it can be transitioned!
That would certainly be nice, but alas, I'm not aware of any "ghost" CSS property.
I would treat it the same as a hover menu: make the parent hoverable instead of the previous sibling:
.qs:hover > .iconhover { opacity: 1; ... }
I have written some css for some elements, and it is causing some unexpected behaviour. I am using:
transition: 0.2s;
When refreshing the page, the element with this css property, unexpectedly start off in another area of the page, and move to their set positions (set in other parts of my css). The,
position: absolute
property is used to position the elements, what could be causing this unexpected behaviour?
Here is the CSS for the link:
.subLinks_links {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
text-align: left;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
font-size: 13px;
color: #999;
margin-bottom: -1px;
cursor: pointer;
text-transform: uppercase;
}
.subLinks_links > span {
margin-left: 30px;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
.subLinks_links:hover > span {
margin-left: 40px;
}
And the relevant HTML for the css:
<div id="subLinks">
<div class="subLinks_links_selected"><span>Link Text</span></div>
<div class="subLinks_links"><span>Link Text</span></div>
</div>
I have found that it was a positioning issue. I was using text-align and margin-left to position the elements. There was no dead positioning, which caused the unwanted behaviour.
I think I'm running into a similar issue. You're using the shorthand transition property which is actually translating to transition: all 0.2s ease 0.2s;. The all is important here. This means that the transition you are using for whatever reason (e.g. hover effects, etc.) is also applying itself to other css properties. In this case, the elements are being specifically targeted to change the layout, and since these properties are overriding the defaults there is a transition from the default to your css for every single property that changes.
I know you already found a fix for your case, but this is a possible solution for others who may stumble here later.
I just created a hover for my menu, but I have a problem with the "span".
I cant't set the width for 100%, so that I will see the all text from the button.
I know that it is possible to set the width rigidly but it should be inherit from the text width.
Can anyone help me with that?
Thanks.
jsfiddle.net/35ufuzw4/
I think you've made this a bit more complex than it needs to be. Here's an updated version of your fiddle:
DEMO
HTML:
Home
About
CSS:
* {
box-sizing: border-box;
}
.navi {
float: left;
text-decoration: none;
position: relative;
color: #000;
font-size: 14px;
padding: 0 20px;
line-height: 40px;
}
.navi:hover {
color: #582d1d;
}
.navi:before {
content: '';
position: absolute;
top: 100%;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-color: #000;
-webkit-transition: all 0.4s cubic-bezier(0.05, 0.06, 0.05, 0.95);
transition: all 0.4s cubic-bezier(0.05, 0.06, 0.05, 0.95);
}
.navi:hover:before {
top: 0;
}
Here's how it works:
Instead of using lots of extraneous markup, we keep things semantic using a pseudo element. The ::before pseudo element has position set to absolute, so when its top/left/right/bottom properties are all set to 0, it will be fill the space of the .navi element that has its position set to relative. Setting its top position to 100%, means that we're going to move the top all the way to the bottom. This allows you to set the top to 0 on hover and have the background-color appear to grow from the bottom up.
The .navi class itself is applied to an anchor tag, so since anchor tags are inline, we can float this element and give it some padding left and right. Using line-height, you can control how tall the element is and ensure that the text inside it is vertically aligned in the center. Add a hover pseudo class and you can change its color when the background 'grows' up behind it.