Join Chris Converse for an in-depth discussion in this video Changing the background color, part of Design the Web: CSS Animated Rollovers.
- View Offline
- Now to begin creating our CSS rollovers, let's go into the exercise files. Let's go into folder 01_01, and let's open up index.html up in the text editor. Now when you have this file open, I basically set up a very simple layout. We have a heading area and a body area. We have the style element in the heading area, where I'm importing a Google font. I have a body rule inside of here as well, which is setting some padding, making use of the font, setting the weight and the size, and using a background image. Next, there's a navigation element here, defined.
And we can see that in the body area, the navigation element wraps around all of these anchor tags. And then each one of these anchor tags has a class of btn. So here in the CSS, we're setting the display type to inline-block. By default, anchor tags have a style of inline. We're setting a border, some padding, text-decoration, letter-spacing, margin color and width. So if we previewed this in a browser, or if your text editor has a preview, this it what the navigation buttons are going to look like. So we have a semi-transparent border with the rgba setting for the border color.
The font color is white, we're using the font we've brought in from Google, and the margin is setting the spacing between the individual buttons. So with this basic layout in place, what we're going to do first is define a hover state for all of these buttons. So let's go back over to our CSS area, let's hit a few returns, and what we're going to do first is target these anchor tags with a btn class and set a hover state. So we'll type a.btn, then a colon, then we'll set the pseudo class of hover. Add a space, put in our brackets, and then inside of here, what we're going to do is, we're going to set a background color.
So we'll type background-color:, space, we're going to use the rgba color space to make a semi-transparent background color. So we'll type rgba, another set of parenthesis, semicolon. Now the color I want to use is going to be 40% black, so that's going to be 0 for red, green, and blue, and then .4 for the alpha. So we'll type 0, 0, 0, for red, green, blue, another comma, then .4. So with that in place, let's come over and preview this in a browser. So now I can hover over these and I can see that the background changes to 40% transparent black.
So now to create a transition for this, we're going to go back to the original rule, which is this rule up here, let's hit a return, and let's add some transition properties. By adding a transition property on to this particular element, any changes that are made to this particular element through CSS will then become animatable by defining those properties. So down here, let's start by typing transition-property, colon, space, the property we want to animate is going to be the background color.
So I'm going to come down here and copy that, and just paste it up here. Put a semicolon, then hit a return. Next we'll set the transition duration. So we'll type transition-duration:, space, and then we're going to define the number of seconds. So we'll type, 1s, then a semicolon. So now with these two transition properties on this main element here, when we hover over this element and this rule takes effect, we'll get an animation from the background color not being specified in the first property to the color that we set here.
And now let's go preview this in a browser. When we hover over the navigation elements, we now see we get an animation that takes 1 second to go from nothing specified as the background color, to the semi-transparent black. And you'll also notice that we get an animation when we move away from the buttons as well. So we can an animation to that state, and then an animation away from the state when the hover is deactivated. Now there's also a setting in transition to allow us to delay the animation. So let's go back to the CSS, let's hit a return, we'll type transition-delay:, space, and then we're going to say 3s.
So with this setting, when we hover over the elements, we won't see an animation for three seconds. So let's go back to our browser, let's hover over Articles, we can count to three, and once three seconds have passed, the hover state will activate. And then if I hover over another element, It'll take three seconds for the first element to animate away, while the element we've rolled over will take three seconds to come back in. So we'll see a smooth transition from one to the other, but both will take three seconds before they're initiated. Now there are a lot of properties that you can animate with CSS. These are some of the most common properties that designers use when they're building their websites.
Now if you'd like to find a full list of all of the CSS properties you can animate, you can find more information at the w3c, or you can search for CSS animation properties in your favorite search engine. In either case you can find a full list of all of the CSS animation properties that are available now, and as more properties become available you'll see those listed on these sites as well. So back in the HTML file we're going to replace all of these individual transition settings with the short hand style. So very smiliar to what we do up here with the padding, where we set the padding property, and then we set top, right, bottom, and left, there is a short hand value set for the transition as well.
So once you know the value for your properties, you can simply use the word transition, and then put a space between the individual values. Now any of these values are optional as well, and I typically don't define the timing property. The ease effect will give you a nice smooth ease in and ease out effect. But if you do want to set ease in and ease out, that is a possibility here as well. So back here in the HTML file, let's come in and convert this to short hand. So I'll take the transition-property I'll remove the -property, just leave it transition.
Then I come down here and select after background-color up to the 1s, hit a space. Then for the delay, I'll come in here, add a space here as well. So now I simply have a transition, and then the property, the duration, we're not specifying the timing function, and then the delay. So if I come back to the browser, hover over these, wait the three seconds, you'll see that I get exactly the same behaviour as I had before. So that working, let me just format this a little bit. I'm also going to come in here and change the 1s to .5, I want the rollover state to happen a little faster, and I'm going to take off the delay.
So I just want the transition setting, and then the property, and the duration. So now back in the browser, if I just hover over these navigation elements here, I'll have a nice smooth transition that's quick enough to indicate that I've hovered over individual elements while maintaining that smooth transition between the states. And now with this in place, next we're going to add a second animated property to our navigation items.