CSS3: Fading Colors (A Quick Introduction)
It’s the little things, I’ve noticed, that really make a website design pop. The layout may be good, the content may be worth reading, but it’s small, minor details that take a good design and turn it into a great one. With the advent of CSS3 and HTML5, those details become even easier to bring in. No longer do designers and coders have to “hack” in their favorite flourishes, but we can now simply enter one or two lines of code and get exactly what we need.
CSS3, for example, has a lot of animated characteristics built right in. Everything from movement, fading, and even replacing current content can be done with just a few simple lines of code. I wanted to introduce you to CSS3 with a four-line code snippit that can make any website just a bit more polished: a color transformation when you hover over a link.
The first thing we want to do is define our hyperlink colors. We’ll start simple; I’m only going to change the default link color in the widget areas and the post content:
[code]
.post a, .widget a{
color: #09F;
text-decoration: none;
}
.post a:hover, .widget a:hover{
color: #F000FF;
}
[/code]
Nothing too unfamiliar, right? We’re defining our hyperlink colors as blue in a resting state, and pink in a hover state. Now, watch what happens when we add in the “transition” property (here’s a hint: if you want to see it in action, poke around the site a bit and try hovering over some links!)
[code]
.post a, .widget a{
color: #09F;
-webkit-transition:color .25s ease-in;
-moz-transition:color .25s ease-in;
-o-transition:color .25s ease-in;
transition:color .25s ease-in;
text-decoration: none;
}
.post a:hover, .widget a:hover{
color: #F000FF;
}
[/code]
Now, you may be asking why we’ve added 4 different versions of the same code? Like its friend “border-radius” and all of the other CSS3 commands, all of the major browsers have different ways they interpret the code, and all have browser prefixes. “Webkit” works on all Safari/Chrome browsers, “moz” on Firefox (and mozilla-based browsers), “o” is for opera, and the non-prefixed version is a catch-all should everything decide to standardize.
Now, without going too in-depth, here’s what that line is doing: the first value is the other property we’ll be affecting. In this case, we’re going to be applying the transition to the “color” property. But we can apply it to any other CSS property we want; color makes for a nice looking effect, so we’ll use it for our demo. Next, is time. the ‘s’ stands for seconds, so .25 is 1/4 of a second, or 2500 milliseconds. And finally, ‘ease-in’ is the animation applied to the transition.
Hover over a link, and you’ll see a nice fade from blue to pink. You can adjust the timing to make it faster (.15s) or slower (.5s), or change the colors. This is a quick way to add a visual pop to nearly any website. I’ll do a more in-depth look at CSS3 later, but for now, enjoy this handy little snippit.