I'm trying to make a color transition but I don't know how to make the effect that the color will be added gradually without increase size.
a:hover{
background-color:#c0392b;
transition: 1000ms linear;
padding:20px;
<nav class="navigation-in-center">
<ul class="container menu group">
<li>A PROPOS</li>
<li>SERVICES</li>
<li>IDEES</li>
<li>CHEQUES CADEUX</li>
<li>CONTACT</li>
</ul>
</nav>
Your size is increasing due to padding.
Remove the padding and apply transition to the a element, not in it's hover state:
a {
transition: all 1000ms linear;
}
a:hover {
background-color: #c0392b;
}
<nav class="navigation-in-center">
<ul class="container menu group">
<li>A PROPOS</li>
<li>SERVICES</li>
<li>IDEES</li>
<li>CHEQUES CADEUX</li>
<li>CONTACT</li>
</ul>
</nav>
You should add a transition for "background-color" only.
transition: background-color 1000ms linear;
a{
display: inline-block;
padding:20px;
transition: background-color 1000ms linear;
}
a:hover{
background-color:#c0392b;
}
<nav class="navigation-in-center">
<ul class="container menu group">
<li>A PROPOS</li>
<li>SERVICES</li>
<li>IDEES</li>
<li>CHEQUES CADEUX</li>
<li>CONTACT</li>
</ul>
</nav>
Related
I am having trouble transitioning fade in simultaneously on two classes when I hover over either one of them.
.sv-logo {
opacity: 0.5;
transition: all .3s;
}
.nav{
opacity: 0.5;
transition: all .3s
}
.sv-logo:hover, .sv-logo:hover + .nav{
opacity: 1;
transition: all .3s;
}
.nav:hover, .nav:hover + .sv-logo{
opacity: 1;
transition: all .3s;
}
<div class="grid">
<div class="sv-logo">
<img id="logo1" src="images/logo.png" alt="logo">
</div>
<div class="nav">
<nav>
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
The above CSS works when I hover on top of .sv-logo, both classes fade in. However, when I hover over .nav, only .nav fades in.
Your problem lies in the fact that the adjacent sibling selector only selects the following element. It can't select the previous element.
Consider encapsulating in another container, maybe header
header {
opacity: 0.5;
transition: all .3s;
}
header:hover{
opacity: 1;
transition: all .3s;
}
<div class="grid">
<header>
<div class="sv-logo">
<img id="logo1" src="images/logo.png" alt="logo">
</div>
<div class="nav">
<nav>
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</div>
You could also use javascript which can traverse the DOM better.
I'm basically trying to add an animation to my navigation so when a user hovers over the links the text color fades in blue, and then fades back out to black after. I've read up on the transition property and watched a few tutorials on Youtube but I can't get it to work when I apply it to my own navigation bar.
Below is a link to my Codepen, if anybody could shed some light on the problem I'd be really appreciative..
Thanks
HTML:
<!-- header starts here -->
<header>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Service</li>
</ul>
</nav>
</header>
http://codepen.io/Clarkpen/pen/razMWB
Try here:
http://codepen.io/anon/pen/myMrRq
I included a transition on the anchor:
nav ul li a {
transition:all 400ms ease-in;
}
Note it is good practice to add the vendor prefixes:
nav ul li a {
-webkit-transition: all 400ms ease-in-out;
-moz-transition: all 1400ms ease-in-out;
-o-transition: all 400s ease-in-out;
transition: all 400ms ease-in-out;
}
EDIT
I have edited your codepen here to only add the transition to the navigation links:
http://codepen.io/anon/pen/RNZGpL
nav ul{margin:0px;padding:0px;}
nav ul li{float:left;list-style:none;}
nav ul li a{text-decoration:none; padding:15px; color:#666; text-transform:uppercase;transition:ease-in 0.5s;-webkit-transition:ease-in 0.5s;-ms-transition:ease-in 0.5s;-moz-transition:ease-in 0.5s;}
nav ul li a:hover{background:#F00; color:#FFF;}
<nav>
<ul>
<li>Home</li>
<li>About US</li>
<li>Products</li>
<li>Feedback</li>
<li>Contact</li>
</ul>
</nav>
Demo
I have a navbar with a opacity transition. The way I've set it up is I have the .rounded class with black background color, and on top of that I target the li's in the ul, adding the image graphic and transitions. Then finally I have a li:hover, changing the opacity (showing through to the .rounded.)
My problem is that for some reason, the main .rounded class has a black bar sticking out as shown:
Here is my full code:
http://jsfiddle.net/YVTBt/
The navbar part of the HTML:
<ul class="rounded"> <!-- Navbar-->
<li class="sideBarButton">
<a href="../www.google.com">
Home
</a>
</li>
<li class="sideBarButton">
<a href="../www.google.com">
About
</a>
</li>
<li class="sideBarButton">
<a href="../www.google.com">
Download
</a>
</li>
<li class="sideBarButton">
<a href="../www.google.com">
Screenshots
</a>
</li>
<li class="sideBarButton">
<a href="../www.google.com">
Licence
</a>
</li>
<li class="sideBarButton">
<a href="../www.google.com">
Others' Stuff
</a>
</li>
<li class="sideBarButton">
<a href="../google.com">
Support This
</a>
</li>
<li class="sideBarButton">
<a href="../google.com">
About Me
</a>
</li>
<li class="sideBarButton">
<a href="../google.com">
Help
</a>
</li>
</ul> <!--- Navbar-->
The relevant part of the CSS:
.rounded > li:first-child
{
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
background-image: url(woodbutton.gif);
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
z-index: 1;
}
.rounded > li:last-child
{
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
background-image: url(woodbutton.gif);
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
z-index: 1;
}
.rounded>li:not(:first-child):not(:last-child) {
background-image: url(woodbutton.gif);
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
z-index: 1;
}
I strongly recommend looking at the fiddle, though. I've been struggling with this for a few days now, any help?
Obviously, user-agent sylesheets adds some left padding to ul element by default.
In this particular case you can just reset it by setting
.rounded {
padding: 0
}
See Updated fiddle
Try with removing the position:absolute tag on the .rounded class.
See http://jsfiddle.net/damoiser/5Nurg/
Then, you can put some background-color on the lis elements.
Using radio buttons to trigger hidden/shown accordion menu. Works in jsfiddle... Does not work in any other browser I've tried. I'm assuming its something small I've miss typed or am missing or I'm totally lost. I'm aware not everything works right in all browsers/setups/etc but from what I've read/understood this work?
EDIT: max-height does not work in jsfiddle either... So this must be the problem. Basically I want the ul to auto expand to the length of it's li list. So using a fixed height will not work. height: auto; as well as max-height; neither work..
Any and all help is appreciated it.
HTML
<section class="container">
<div>
<input id="test1" name="acctest" type="radio" checked />
<label for="test1">About us</label>
<ul>
<li>test</li>
<li>test2</li>
</ul>
</div>
<div>
<input id="test2" name="acctest" type="radio" />
<label for="test2">About us</label>
<ul>
<li>test</li>
<li>test2</li>
</ul>
</div>
CSS
.container ul{
background: rgba(255, 255, 255, 0.5);
margin: 0px;
overflow: hidden;
height: 0px;
position: relative;
margin: 0;
z-index: 1;
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
transition: height 0.5s ease-in-out, box-shadow 0.9s linear;}
.container li{
height: 25px;
color: #000;
font-size: 12px;}
.container input:checked ~ ul{
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
transition: height 0.5s ease-in-out, box-shadow 0.9s linear;
max-height: 50px;}
UPDATED jsfiddle link: http://jsfiddle.net/ETaXr/2/
Thanks again!
So I found CSS transition auto height not working (click that title for the link)
props to Christofer Vilander for the answer and fiddle link.
I edited the fiddle over to radio buttons (the demo used checkboxes) and changed some of the class/id names... and it works... It seems I needed to define the UL more than I did.
http://jsfiddle.net/3WK9Y/11/
<div class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="radio" checked/>
<ul class="ac-small">
<li>Some content</li>
</ul>
<label for="ac-1">About us</label>
</div>
<div>
<input id="ac-2" name="accordion-1" type="radio" />
<ul class="ac-small">
<li>Some more content</li>
<li>test</li>
</ul>
<label for="ac-2">About us</label>
</div>
</div>
see the fiddle for the css plz... its much longer and more detailed.
I manage to put something together from bits and peaces from both Christofer and Elementalsin on the subject. See fiddle for a better understanding of the css3 involved. This modification works a lot better because the above example could only close an item after clicking a second one. Here you can toggle them.
<div class="css3-acc">
<input id="css3-acc-def" type="radio" name="ccs3-acc-grp" checked="checked" />
<label>
<input class="inner" type="radio" name="ccs3-acc-grp" />
<h3>Item 1</h3>
<label for="css3-acc-def"></label>
<ul>
<li>Sub nav</li>
<li>Sub nav</li>
<li>Sub nav</li>
<li>Sub nav</li>
</ul>
</label>
</div>
I'm trying to understand the simplest background transition possible using only HTML5 and CSS3. Searching through stackoverflow I've learned it can be easily implemented using external libraries such as jQuery but for this project I've decided not relying on any of those.
Markup
<nav>
<ul>
<li><a id="foobar" href="http://www.google.com/search?q=foobar">Foobar</a></li>
</ul>
</nav>
Styles
body {
background: url('background-default.png'), no-repeat;
}
#foobar a:hover {
background: url('background-hover.png'), no-repeat;
-webkit-transition: // TODO;
-moz-transition: // TODO;
-o-transition: // TODO;
-ms-transition: // TODO;
transition: // TODO;
}
As I mentioned in my comment, you can't transition the background-image property but you can get the sort of effect you're looking for if you're willing to add extra markup and then transition the opacity. So you'll have some markup like this:
<nav>
<ul>
<li>
<img src="no-icon.png">
<img src="yes-icon.png">
<a id="foobar" href="http://www.google.com/search?q=foobar">Foobar</a>
</li>
</ul>
</nav>
Then set the transition on the images, absolute position them (so they'll be like backgrounds), and hide one of them by default (I've left out the vendor extensions for clarity):
nav li img {
position: absolute;
transition-duration: 1.5s;
opacity: 1;
}
nav li img:first-child {
opacity: 0;
}
Then swap the opacity values on li:hover:
nav li:hover img {
opacity: 0;
}
nav li:hover img:first-child {
opacity: 1;
}
Here's a full working example. Not an ideal solution because you have to add extra markup, but it'll work.
Here's an example of the code I use to achieve this. The images are sprites which each contain normal and hover state. The trick is to add the img to both li and a, and to use opacity to change the appearance of the image. You can then use css3 transitions to make this appear smoother.
<ul id="homenav">
<li class="h"><a href="#><span>Home</span></a></li>
<li class="i"><span>Inloggen</span></li>
<li class="v"><span>Voorbeelden</span></li>
</ul>
#homenav li.h, #homenav li.h a {background-image: url('img/btn_home.gif');}
#homenav li.i, #homenav li.i a {background-image: url('img/btn_inloggen.gif');}
#homenav li.v, #homenav li.v a {background-image: url('img/btn_voorbeelden.jpg');}
#homenav li {background-position: 0 170px;}
#homenav li a {background-position: 0 0;}
#homenav li a:hover
{opacity: 0;
-webkit-transition: opacity .8s ease-in;
-moz-transition: opacity .8s ease-in;
-o-transition: opacity .8s ease-in;
transition: opacity .8s ease-in;}
#homenav a {display: block; height: 100%;}
#homenav a span {display: none;}