Design

[CSS Tutorial] How to Create Color-Changing Fonts, Borders and Backgrounds

By March 10, 2017 No Comments
Css to add color changing elements

When building a website it’s all in the details. Adding custom fonts, borders and backgrounds can create a cohesive look throughout the site. You can even take your customization a bit further by making these elements color-changing to fit your carefully thought-out color scheme. Making elements color-changing on your website is surprisingly easy using CSS. There are two main parts to creating a color changing element including the element you’re applying the animation to and the @keyframes rule. This CSS tutorial will give you an overview on how to create color-changing elements throughout your website.

Here’s how to create color-changing fonts, borders and backgrounds using CSS:

Let’s say we want to apply the animation to a list of items, like so:

In this example we’re going to be applying a different type of animation to each <li> element: the font color, border color, and background color. We’ll need to create a different animation for each.

Let’s break that down.

  1. First, we gave the animation a name (Font, Border, Background, whatever you want to call it. It can be anything!).
  2. Then we gave the animation a duration, in this case 15 seconds. This is how long it will take the animation to go from start to finish.
  3. Next, we’ve specified a number of iterations, the number of times we want the animation to play (in this case, infinite).
  4. Last, we gave a direction, which can be either alternate or reverse. This determines in what order the animation plays.

Adding colors to elements using CSS

Let’s make our @keyframes rule for the first <li> element.

Awesome, right? Let’s go through the different parts.

  1. @webkit-keyframes Font – Here, “Font” is what we named our animation earlier.
  2. Percentages and colors – These determine what state the animation will be in at at certain times. At 0% (the beginning), the font color will be the color crimson. It will then shift to orange at 20%, then goldenrod at 40%, and so on. The percentages can increase by any interval, I just happened to choose 20%.

Creating color-changing elements with CSS

Now for the other two. The only things we need to change are the animation names and the CSS styles.

And that’s it! Now you can add a bit of pizazz and have color-changing elements on your website! There are a ton of other cool things you can do with animations, too that can really give your website dimension. However, make sure you pick and choose what animations will have the greatest impact on the design of your website so that you don’t clutter your content. What are some of your favorite CSS animations to use in your web design? 

Executive's Guide to Web Development

This 80-page guide of topics and tips to navigate your way to a better website will be a huge asset to you and your business. It’s been read by thousands and loved by all. Increase your web design acumen today.