Grow your CSS skills. Land your dream job.

Color Animate Any Shape with a Knockout PNG

Published by Chris Coyier

You normally don't think of <img> as having a background color, but they certain can have that property. It might come up if say, you wanted two borders around your images. You could use border for one and simulate the other by giving the image a background-color and padding. Or maybe you set the background to a bright red color so that missing images are bold and obvious.

There is another reason you might want to declare a background color on an image, and that's to show the color through the transparent parts of the image. In fact, with that idea, you can create any shape you want as a "knockout" and set the color behind it. That means you can control the color of that unique shape through CSS and do any of the neat stuff CSS can do. Like say, animate it's color!

First we make an image where the solid parts match the solid color of the background of the site we are working with. For sake of example, white. The "shape" is the transparent part. Here's what that would look like in Photoshop:

We put it in the markup:

<img src="images/marilyn.png" alt="">

And we color it:

img { background: red; }

Then we make an animation to cycle through some colors. Two syntaxes for this now (grunt):

@-webkit-keyframes super-rainbow {
    0%   { background: red; } 
    20%  { background: orange; }
    40%  { background: yellow; }
    60%  { background: green; }
    80%  { background: blue; }
    100% { background: violet; }
}

@-moz-keyframes super-rainbow {
    0%   { background: red; } 
    20%  { background: orange; }
    40%  { background: yellow; }
    60%  { background: green; }
    80%  { background: blue; }
    100% { background: violet; }
}

Then we apply that animation to the image:

img {
     background: red;  
     -webkit-animation: super-rainbow 15s infinite alternate linear; 
     -moz-animation: super-rainbow 15s infinite alternate linear; 
}

That'll do 'er. Check out the demo for this example and other quick fun one of rainbow gradient on a bicycle shape that moves on hover.

View Demo   Download Files

Images snagged off of Vecteezy.

Comments

  1. Chris

    Very cool Chris, it would appear to me that jQuery is slowly been beaten as far as animation and transitions go.

    • I still feel there is a place for jQuery because everyone does not have the lastest and greatest updates of their browsers. So they not have support for these css animations

    • bill

      So because of a couple of animations that only work in Webkit and a beta version of Firefox, jQuery has been “beaten”? Gimmie a break. Guess you’re not a developer.

    • Mark

      Yeah, it does seem like CSS animations are stomping all over jQuery (both in performance and coding ease). Unfortunately, these examples are on the “bleeding edge” of CSS, and it is unrealistic of developers to expect our visitors to have the latest Webkit or Mozilla builds (as much as I’d like to force them to get it). As long as IE treats HTML/CSS specs as guidelines, rather than rules, it will be sometime before jQuery (a very solid cross-browser solution) can be “beat.”

    • Can someone please explain me how CSS3 animations are better in performance than jQuery animations? Because in my experience CSS3 animations have lower frame rate and are less smooth…

      Thanks in advance.

  2. I’d like to point out a couple things. Currently Firefox doesn’t support CSS Animations (only transitions) and that in WebKit browser we can go a step further and use actual CSS masks ( http://css-tricks.com/webkit-image-wipes/ ), which I hope will get into the spec as they are awesome.

  3. Kinda neat!! Honestly, never thought about having a background for an image !! When’s firefox gonna support CSS3 keyframe animations!!

  4. This is awesome, Chris. Thanks for sharing!

  5. Never thought of that! This would look great combined with a scrolling effect, where it could change it’s colour the further down you scroll, etc.
    Altough that kind of effect has alreadey been archieved, this would be a new approach!

    And you could easily mask images (like with the CSS mask property) by not only declaring a background colour, but a background image!

    Nice bit of inspiration here Chris, thanks.

  6. Perhaps, it’s something on my end (Mac Safari 5.0.5), but the bicycle doesn’t seem to change on hover at all. The Marilyn works fine…

  7. Hi Chris, what a good idea I can see where this could come in handy on my new site cheers from UK. Great news letters too.

  8. John

    I use this technique to give each project in my portfolio a unique color.

    Check it out:

    http://www.byjohn.se

    • John

      You can also achieve the same effect on any element by setting both a background-image and a background-color.

      Useful for links for example:
      a.pngLink { background: url(img/myImg.png) red; display: block; width: 50px; height: 50px; }

  9. MichaƂ Czernow

    I think you can also declare a background image(s) on images, which give us another elements to create innovative effects.

  10. What About IE.. ? its not working at all

  11. Wow! Awesome Chris, just like always. You know, I think theory is one thing, but finding tips like this based on a theory is a completely different subject. Though I knew about CSS3 Animations, I never thought of something that genius.
    Let’s learn and support CSS3. Read CSS3 Multi-Column Layout Module.
    Also CSS3 Writing Module can be helpful for users with languages other than English.

  12. Awesome! I really enjoy reading your articles about CSS! I do not know how you get so much of knowledge and ideas! i die trying but not able to do what you do!

  13. Permalink to comment#

    Yeah! We use this on our Throwster Tees site (www.throwstertees.com) when picking what color tee shirt customers want to buy.

    I always look forward to seeing this site…glad I have done something on here! :D Good stuff!

  14. This is fantastic! I love this kind of tip: It has so many levels and possibilities of use! I get really sad when developers are down on new css stuff – you might not be able to implement it right here right now on every site, but this stuff is what makes web design fun

  15. Paul

    is that Hoffman’s bike?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".