The CSS code:
.css3_nudge ul li a {
-webkit-transition-property: color, background-color, padding-left, border-right;
-webkit-transition-duration: 400ms, 400ms, 400ms, 400ms;
}
.css3_nudge ul li a:hover {
background-color: #efefef;
color: #333;
padding-left: 50px;
border-right: 1px solid red;
}
The HTML code:
<div class="css3_nudge nudge">
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Register</li>
<li>Contact</li>
</ul>
</div>
The transition is working fine for all elements but border, it just appears at the end of 400ms, there is no effect on border.
What I'm trying to achieve is a effect like the new google gmail buttons.
Thanks in advance for any help
This is a pretty simple fix. You just need a border to already exist before the hover effect. So just set the border-right: 1px solid #fff; like below:
.css3_nudge ul li a {
-webkit-transition-property: color, background-color, padding-left, border-right;
-webkit-transition-duration: 400ms, 400ms, 400ms, 400ms;
border-right: 1px solid #fff; /* added property */
}
Then the transition is effectively just changing the colour of the border instead of creating a border.
Related
I'm wanting to have a border bottom transition on my header navigation when the cursor hovers over the links. It was working when I first implemented this, but after adding some more code, I can't get this to work whatsoever.
My CSS looks like this:
a:link,
a:visited {
color: #1c2234;
text-decoration: none;
padding-bottom: 20px;
border-bottom: 3px solid transparent;
-webkit-transition: border-bottom 0.2s, color 0.2s;
transition: border-bottom 0.2s, color 0.2s;
}
a:hover,
a:active {
color: #555;
border-bottom: 3px solid #1c2234;
}
Here's a picture of the header
I know that a common issue with this is not setting the border-bottom prior to hover, but I did that already and set it to transparent. The color changes upon hover, but the border isn't showing up. Any ideas? Thanks!
Just figured this out. I was calling overflow: hidden on my .main-nav class, and that was hiding my border-bottom.
I have some <li> tags in an <ul>. On hover, <a> tags in <li> change their background; and I added transition property in li a style in CSS to give some sort of animation effect.
I also want to change their font size along the window width so I added some media query with #media all and .... The problem is that the transition delay is applied to font size changes.
Here are my codes.
HTML(paste any place in <body>):
<ul>
<li>Home</li>
<li>Sites</li>
<li>Events</li>
<li>Support</li>
</ul>
CSS:
li a{
padding: .4em 1em;
text-decoration: none;
color: #000;
transition: .4s;
}
li a:hover{
background-color: #ddd;
}
//...
#media all and (min-width:1px){
ul{font-size: .8em;}
}
#media all and (min-width:480px){
ul{font-size: 1.2em;}
}
I tried in two ways:
1) writing transition: .4s in li a:hover{...}. In this case the font size changes immediately but transition does not work when cursor leaves the list element.
2) writing transition: 0 in ul {...} in media query. This makes no changes.
What do I have to do in this case?
Edited: I'm sorry but I cannot upload the full code because the codes are fragmented to all components in an Angular2 project. Hope these codes are enough.
You need to specify which properties the transition should use
transition: background-color 1s;
Stack snippet
li a{
padding: .4em 1em;
text-decoration: none;
color: #000;
transition: background-color 1s;
}
li a:hover{
background-color: #ddd;
}
#media all and (min-width:1px){
ul{font-size: .8em;}
}
#media all and (min-width:480px){
ul{font-size: 1.2em;}
}
<ul>
<li>Home</li>
<li>Sites</li>
<li>Events</li>
<li>Support</li>
</ul>
Make border-bottom disappear on hover.
<a id="toggle" href="#modal0">living in New York,</a>
#toggle {
transition: all .3s ease-out;
position: relative;
}
#toggle::after{
content:'';
position:absolute;
width: 100%;
height: 0;
left:0;
bottom: 4px; /* <- distance */
border-bottom: 2px solid #000;
}
#toggle::after:hover{
transition: all .3s ease-out;
border-bottom: solid transparent 1px
}
Changed pseudo hover as suggested
#toggle:hover::after{
border-bottom: 1px transparent #999;
transition: all .3s ease-out;
}
You need to add position:relative to #toggle. This will make the positioning of the ::after pseudo-element relative to the element's position.
Edit
Per the update, you need to switch the ::after and the :hover, so #toggle:hover::after. That way it's "the after pseudo-element, of the #toggle when hovered".
You could set the display property of your a-element to inline-block and set the height property to something like 0.9em to move the bottom border closer, eg.
<a id="toggle" href="#modal0" style="display:inline-block;height:0.9em;">living in New York,</a>
So I've always animated with JavaScript but I wanted to try doing simpler animations with CSS. I have followed the guide on w3schools exactly but I can't seem to get any results.
nav ul li {
display: inline;
}
nav ul li a {
margin: 0em 2em;
text-decoration: none;
color: #000;
}
nav ul li a:hover {
animation: borderGrow 2s;
-webkit-animation: borderGrow 2s;
}
#keyframes borderGrow {
from { border-bottom: 0em solid #000; }
to { border-bottom: 1em solid #000; }
}
#-webkit-keyframes borderGrow {
from { border-bottom: 0em solid #000; }
to { border-bottom: 1em solid #000; }
}
<nav>
<ul>
<li><a href="#">Link One</li>
<li><a href="#">Link One</li>
<li><a href="#">Link One</li>
</ul>
</nav>
For some reason, the animation doesn't seem to work when the border property is not set on the original element itself (before the animation). Adding the border property to the original element does seem to solve it.
Based on MDN's list of animatable properties, it seems like while the border-color and border-width are animatable, the border-style is not and this could possibly be the reason why we are having to add it in the original element. However adding just border-style: solid by default produces a border in almost all browsers (if not all) and so it is better to specify the border-width: 0 also along with it.
Note:
Behavior seems to be consistent in IE10, IE11 and Firefox. So it is more likely to be the expected behavior and not a bug.
I will update the answer with further details if and when I manage to find a clear and specific source explaining the reason for the behavior.
nav ul li {
display: inline;
}
nav ul li a {
margin: 0em 2em;
text-decoration: none;
color: #000;
border-bottom: 0em solid #000;
}
nav ul li a:hover {
-webkit-animation: borderGrow 2s;
animation: borderGrow 2s;
}
#-webkit-keyframes borderGrow {
from {
border-bottom: 0em solid #000;
}
to {
border-bottom: 1em solid #000;
}
}
#keyframes borderGrow {
from {
border-bottom: 0em solid #000;
}
to {
border-bottom: 1em solid #000;
}
}
<nav>
<ul>
<li>Link One
</li>
<li>Link One
</li>
<li>Link One
</li>
</ul>
</nav>
Alternately this same effect can be achieved by just using transition instead of animation also. And for transition the need to set a border on the element before hover seems to be completely optional. Below is a sample snippet.
nav ul li {
display: inline;
}
nav ul li a {
margin: 0em 2em;
text-decoration: none;
color: #000;
border-bottom: 0em solid #000; /*optional for transition */
-webkit-transition: border-bottom 1s;
transition: border-bottom 1s;
}
nav ul li a:hover {
border-bottom: 1em solid #000;
}
<nav>
<ul>
<li>Link One
</li>
<li>Link One
</li>
<li>Link One
</li>
</ul>
</nav>
Problem 1.
You didn't complete ... tag in html. Below this right code is....
<nav>
<ul>
<li>Link One</li>
<li>Link One</li>
<li>Link One</li>
</ul>
</nav>
Problem 2.
You didn't add the primary border value for a tag. just add this css below to nav ul li a.
border-bottom:0em solid #000;
Check out my answer on jsfiddle
Right now I have the same problem on Safari/Webkit Browser. The border property does not work when I use this on css animation keyframes. You have to set/declare first the border property on the css file in order to work.
Example:
div.menu-menu-1-container ul li a, div.menu-menu-1-container ul.navbar-nav li.open ul.dropdown-menu li a,
.search-box .dropdown a i, .button-search
{
border: 10px groove #ffd700; /* do not forget to declare the border property and value or it will not work; */
animation: HHootteeLL 4s linear infinite;
-webkit-animation: HHootteeLL 4s linear infinite;
-moz-animation: HHootteeLL 4s linear infinite;
-ms-animation: HHootteeLL 4s linear infinite;
-o-animation: HHootteeLL 4s linear infinite;
}
I've run into a strange issue that only affects Firefox. All form fields display as I expect them to (that is to say, with thin 1px borders which change colour based on the current validation state of the input value) except for one specific field inside a reCAPTCHA widget, which has a persistent red glow around it until text has been added. Note that this is the ONLY field in this form which has this effect, and it isn't coming from any of my styles--I've checked the computed styles and there's nothing to explain this.
I've already applied outline: 0px none transparent; and -moz-appearance: none; to this elements without success. Thoughts?
SASS:
input, textarea, select {
padding: 0.35em 0.5em;
width: 100%;
max-width: 100%;
border: 0.1em solid #C5C5C5;
background: #FFFFFF none left center no-repeat;
// Add a subtle grey tone to the the text when not focused
color: darken(#C5C5C5, 25%);
// Nice transitions to smooth out the experience
-webkit-transition: border-width 0.1s ease-in-out, border-color 0.1s, background 0.1s;
-moz-transition: border-width 0.1s ease-in-out, border-color 0.1s, background 0.1s;
transition: border-width 0.1s ease-in-out, border-color 0.1s, background 0.1s;
-moz-appearance: none !important;
outline:0px none transparent !important;
&:focus {
// border-color: #000000;
border-left-width: 0.25em;
border-color: $info;
color: $base-font;
background-image: url("../img/info-arrow.png");
outline:0px none transparent !important;
&:invalid {
border-color: $error;
background-image: url("../img/required-arrow.png");
}
&:valid {
border-color: $success;
background-image: url("../img/success-arrow.png");
}
&:optional {
border-color: $info;
background-image: url("../img/info-arrow.png");
}
}
&[disabled] {
background-color: $gray;
color: darken($gray, 50%);
}
}
HTML:
<div class="field-captcha"> <div id="recaptcha_widget" style="display:none" class="recaptcha_widget">
<div id="recaptcha_image"></div>
<div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect. Please try again.</div>
<div class="recaptcha_input">
<label class="recaptcha_only_if_image" for="recaptcha_response_field">Enter the words above:</label>
<label class="recaptcha_only_if_audio" for="recaptcha_response_field">Enter the numbers you hear:</label>
<input type="text" id="recaptcha_response_field" name="recaptcha_response_field" required>
</div>
<ul class="recaptcha_options">
<li class="recaptcha-link">Powered by reCAPTCHA</li>
<li class="new-captcha">
<a href="javascript:Recaptcha.reload()">
<span class="captcha-hide">Get another CAPTCHA</span>
</a>
</li>
<li class="new-captcha audio-captcha recaptcha_only_if_image">
<a href="javascript:Recaptcha.switch_type('audio')">
<span class="captcha-hide">Get an audio CAPTCHA</span>
</a>
</li>
<li class="new-captcha image-captcha recaptcha_only_if_audio">
<a href="javascript:Recaptcha.switch_type('image')">
<span class="captcha-hide"> Get an image CAPTCHA</span>
</a>
</li>
<li class="help">
<a href="javascript:Recaptcha.showhelp()">
<i class="icon-question-sign"></i><span class="captcha-hide"> Help</span>
</a>
</li>
</ul>
</div>
EDIT: Added SASS and relevant HTML to question
Following Steven Don's noting that it was a box-shadow effect I tried adding box-shadow: none to all inputs and textareas and it overrode the default Firefox styling causing this red glow effect. For the curious, here were the actual rules causing the effect (from forms.css):
:-moz-ui-invalid:-moz-focusring:not(output) {
box-shadow: 0px 0px 2px 2px rgba(255,0,0,0.4);
}
:-moz-ui-invalid:not(output) {
box-shadow: 0px 0px 1.5px 1px red;
}
Since they're from the browser stylesheet they're easy to override with even a basic element selector, which is what I've done here. Either way it resolves this particular cross-browser display issue.