So, on my code, I have an anchor to which I added a :before in order to create a css triangle. I'm trying to get an opacity transition to display the triangle whenever you hover over the anchor. But for some reason a lot of times if you ''rush in'' on the link it skips the transition and it shows the triangle with full opacity, however, if you gently hover through just about the border of the link the transition works. I'm wondering what it is that I'm doing wrong...
Also, I noticed (if I'm not being crazy) that on jsFiddle it works a little better, but then again, I did change my code slightly to include just this part. You might have to play with it a little, from different angles, to see what I'm saying.
Lastly, the transition does not apply when you move the pointer from outside the anchor.
Here is my code : JSFIDDLE
I think this fixes your issue:
http://jsfiddle.net/PhE59/3/
Basically I moved the border declaration outside of the hover statement:
a:first-child:before {
border-bottom: 63px solid black;
border-left: 186px solid transparent;
}
a:last-child:before {
border-bottom: 63px solid black;
border-left: 150px solid transparent;
}
a:first-child:hover:before {
opacity:1;
}
which doesn't force the creation and removal of borders on every hover, instead creating the borders only once (on page load) and letting the animation go smoothly by only effecting the opacity.
there are still issues if you hover quickly which would be handled by reducing the animation time to lower than 1s
Related
CSS learner here.
Im making frontend mentor exersise with 3 card preview. After i added the hover state to the buttons the whole card is expending by few pixels when i hover over it. Cards are made with flexbox. I tried to locate the source of this, but so far im unable.
Here is the the whole thing.
https://codepen.io/Dungeoner999/pen/JjELjmB
/*-----*/
Do anyone know why this is happening and what can i do to make the cards size fixed?
.btn-1 does not have border. While .btn-1:hover has 1px border. To fix the issue, give it 1px transparent border.
.btn-1 {
color: var(--orange);
border: 1px solid transparent;
}
Just put border to your .btn style and problem solved:) Card get's bigger right now because of one extra pixel from hover
border: var(--tWhite) 1px solid;
I'm trying to emulate a certain kind of menu that can be seen in iOS with CSS. It has menu items in a ul, and clicking each one makes the menu slide over to reveal the page.
However, whenever the menu is sliding (while it's actively sliding) the corners turn square. Then they go back to being rounded after animation is finished.
Here's a jsfiddle with a lot of my superfluous styling code cut out. If you click on either of the titles in the list, you'll see that the corners turn square just as the content is animating. This can be seen again when you press the back button.
I see this issue in the latest Chrome and Safari, but not in Firefox.
You could give #modal-content a z-index of 1 (assuming nothing below it has a z-index greater than 1) and it should keep the border-radius during the transition.
.modal-content {
position:absolute;
bottom:0;top:0;left:0;right:0;
margin: 10vh;
border: 1px solid #ccc;
border-radius: 15px;
overflow:hidden;
z-index: 1;
}
By making .modal-content higher in the element stack, when the transition happens the child elements of .modal-content are moving "underneath" .modal-content. So .modal-contents border isn't obscured by the transitioning child.
I've got to this point in which I'm trying to do a hilite animation on an element which I can't move or modify its boundings, so i used an outline in addition to its background color to have an animation area bigger than the element itself (here's a sample):
#keyframes hilite {
0% {
background-color: transparent;
outline: #ffffff solid 10px;
}
20% {
background-color: #F6F6BC;
outline: #F6F6BC solid 10px;
}
100% {
background-color: transparent;
outline: #ffffff solid 10px;
}
}
But now i'm freaking seeing that the background animation triggers in every case, but the outline animation works only when the element has an outline style value (none doesn't work, when background none doesn't avoid animations).
You can see it here.
I don't want to fix it, it's already fixed, but understand it - seems illogical to me.
Lots of thanks in advance.
Border and outline styles cannot be animated; this is by design. When you attempt to animate a change from none to solid, as shown in the last box in your fiddle, what happens is that it switches to solid immediately, which causes it to display as a black outline momentarily before animating to the color that's defined, so it doesn't actually animate from no outline to a solid outline in that sense.
If you need a smooth animation from an invisible outline to a visible outline, animate outline-color between a color value and transparent instead of outline-style between solid and none. I see that you're using #ffffff in place of transparent, which also works provided the background of the container is also white.
It seems that when you have an element with different sized/colored borders, you can see a very strange jagged line happening. I never noticed this before, but was looking at Vimeo's super hot new design when I noticed this (don't really want to say "glitch") weird occurrence.
So if you had a div hanging out, styled as in below, you'll notice a pixel stepping (almost like it's set to inset, rather than solid...)
div {
height : 25px;
width : 50px;
background : #eee;
border-style : solid;
border-color : green;
border-left-color : black;
border-width : 3px 3px 3px 15px;
}
Anyone notice this/ know why it happens?
The reason this happens is because it's creating a 'frame' around the box.
Think of a wooden picture frame, you don't use four rectangular pieces of wood to create a frame, you use 4 trapezoidal pieces and put them together. When you set a larger width on one side, its diagonally rendering it inward towards the corner of the box.
The reason it looks bad is because the antialiasing between borders has never been good.
Alternative
You could just do div:before{border-left: 15px solid #000;} if you didn't want the borders cropped like that.
That's not a "glitch" - it's how borders work. They connect diagonally.
If you take it one step further and create a <div> with no height and width, but a large border you can see the result - http://jsfiddle.net/mFzrA/
BTW - this is the technique being used to create pure CSS triangles and speech bubbles. You just make 3 of the borders transparent and the 4th gives you a nice triangle.
I just wanted to suggest using box-shadow on the border with bigger border-width to avoid "jagged line".
Works for me, hope it helps :)
div {
height : 25px;
width : 50px;
background : #eee;
border-style : solid;
border-color : green;
border-width : 3px 3px 3px 0px;
box-shadow:-15px 0px black;
}
I'm trying to highlight the row the mouse is over in a table of data. I'm trying to do this with a border-top and border-bottom. To help the readability i also have a light transparent png on alternate rows.
It seems that when I turn on and off the borders (works in IE8+ and FF) the rows jump around a little. I think I can fix it by having a a non-hover transparent border, rather than none at all. Is this x-browser compatible now days?
In Chrome, the highlighted row's border does not go away when you move the mouse off the row, why?
http://justinzaun.com/Tree/people/
Update: I've fixed the border issue in chrome where they wouldn't go away. I moved the border to the TDs rather than the TR. The rows are still jumping around though.
Thanks!
put an transparent border on your normal state elements.
When the :hover is applied the size of the border changes the size the element takes up.
eg:
.myelement
{
border:4px solid transparent;
}
.myelement:hover
{
border: 4px solid green;
}
http://jsfiddle.net/mPmRA/
EDIT:- more specifically to your table (ugh: tables ... collapse border makes the above not work properly)
http://jsfiddle.net/mPmRA/1/
put the transperant border on the tr
tr
{
border-top:4px solid transparent;
border-bottom:4px solid transparent;
}
And for the hover do something like:
tr:hover td
{
border-top:4px solid green;
border-bottom:4px solid green;
}
The td borders will then appear ABOVE the row's border.
An easier way is adding "margin-top:-1px; margin-bottom: -1px;" to the :hover style, this corrects the new height with the border.
Make sure your border is set to the INSIDE instead of the outside. Unfortunetly, the inset option for borders is not yet part of CSS. Here's a bit of CSS to make the borders inside the element using box shadows:
.mytable tr:hover {
-moz-box-shadow: inset 0 0 1px #000;
}
That will make a 1px black border on the INSIDE of your element! :D
I hope this helps, if you're set on a black dotted border, your only option is to set absolute positioning, and position each table row individually, which is a pain in the ass. :/
If you've got relative or static positioning, elements will move when other increase in size. Wulf's idea may work with a little configuring, but to be honest, the box shadow is a much nicer border then the dotted one. (a bit tacky if I say so myself. ^_^ Sorry.)