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.
Related
There's a bug in the latest Chrome release (49) where CSS like…
background: linear-gradient(currentColor, green);
…isn't updated when the color of the element changes (e.g. on :hover).
How do I hack around this?
The rendering will update if the element is redrawn (See this question).
e.g.
You can force a redraw when the color of the element changes by additionally changing an arbitrary property that triggers a redraw.
The property should be…
webkit only (to reduce side-effects)
overridable (element will only be redrawn if value changes)
rarely important (because we need to assume that the property isn't set on the element yet to override it with the least consequences)
have no visible effects by itself
.box {
width: 200px;
height: 200px;
background: linear-gradient(currentColor, green);
color: #f00;
}
.box:hover {
color: blue;
/* arbitrary webkit-only property that forces a redraw */
-webkit-margin-start: .1px;
}
<div class="box"></div>
You can use border to draw a block of color because border-color auto inherits the color prop, then draw a linear-gradient(to right, white, transparent) on it. Then the border block will look like a linear-gradient from white to the currentColor
See demo: the .g2 shows the bug and .gradient shows the hack.
http://jsbin.com/luzute/1/edit?html,css,output
You can adjust the white's transparency(like rgba(255,255,255,0.5)) to adjust the lighten of the gradient or change white to transparency black(rgba(0,0,0,0.5)) to deepen the gradient.
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
In the example bellow:
http://jsfiddle.net/Du8f6/3/
Im setting inner shadow to the container and 10px border with border-radius set to 50%.
And the result is weired thin white border outside the container border.
The thin white border is visible in:
mozilla firefox
ie 11
and its not visible in:
opera
safari
chrome
any suggestions for fixing this are welcome.
It's because the way the border is rendered: painted over the div. It's another "half pixel" issue and the border color mixs with the div background color... Take a look to Border-radius: 50% not producing perfect circles in Chrome or IE11 draws small line between positioned elements . Those are not the same issue, but have the same origin.
Probably your easier workaround is to skip out the border width of the div and set up a "fake" border using the background of a new wrapper div:
In your html:
<div class="fakeborder"><div class="sub">Hm</div></div>
and in your css:
.sub {
...
border: 0px solid black;
...
}
.fakeborder{
margin:0;
padding:10px; /*The fake border width*/
background:black; /*The fake border color*/
}
I had a similar issue.
Even if I set
box-shadow:0 0 0 rgba(0,0,0,0);
to the element just because I didn't want a box-shadow for that element and I thought I could override the property like this.
That was working in webkit browsers, but FF was still rendering a thin shadow.
A better solution and the best practice to override a css property to its default, it is obviously set it to its default (dumb!)
box-shadow: none
I have an imput field in form with multiple(two) backgrounds like this:
background: url(framework/images/search.png) no-repeat 6px 7px,
/*this is a magnifying glass icon - this is important later */
rgba(200,200,200,0.1);
Then I've got a transition:
transition:background 0.2s linear, box-shadow 0.5s linear;
And on focus of the input field:
input:focus, {
background:rgba(0,0,0,0.1);
box-shadow:0px 1px 0px rgba(0,0,0,0.1) inset;
}
Basically what it does (or should) is when the input field is active the background changes to slightly darker color with transitions. Also box shadow makes an inner effect of inside border. That was the case when background was of one element (only background color). Now when I added icon on higher layer the background wont change, but box-shadow works. I think that browser is confused how to change color of bitmap image.
My question is: Is there a way to transition only one layer of background (address it somehow), so that the bitmap image will stay the same and the color will change?
Thank you.
EDIT: Jsfiddle -> http://jsfiddle.net/8DRTt/
http://jsfiddle.net/8DRTt/1/
input:focus, #two:focus {...}
the problem was the selector.
The #two selector is stronger than the input:focus selector, thus overiding the background property.
When you add #two:focus to the selector of the darker background, it can no longer be overridden.
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.)