Reading Time: 2 minutes

Show a geek you love her with a heart made lovingly with CSS

Credit where it’s due

Hey, I’m not going to lie, I didn’t come up with the CSS3 heart all on my own. The actual CSS for the heart comes from Zander Martineau. I did modify his CSS a tad, but he deserves the credit. I did add in the shadows and animation, though.

Snippets? Of course

I’m not going to elaborate on the construction of the heart. Head over to Zander’s site for that. I will give the lowdown on the animation that you’re seeing in Chrome and Safari.

The beating heart

The beating heart is easy. The first thing I do is create the keyframe and use scale. Now, if you wanted a more interesting way to resize, you could use font-size since the heart is sized in ems. Using font-size and em gets you interesting effects since you actually get to see the font-size trickle down the DOM. Scale just reshapes the element without changing the flow of the elements.

Oh, and no, I don’t know the syntax for animation keyframes in Mozilla or Opera.

@-webkit-keyframes pulse {
 from {
-webkit-transform:scale(.75);
}
 to {
  -webkit-transform: scale(2);
 }
}

The Shadows

It’s a little tiny effect, but it adds some richness to the depth of the scaling when you change your shadows. As it’s farther away, the shadow is darker and closer, as it’s closer, it’s larger. Now, I also did something that’ll jack with your head a little; I sized the shadow in ems. Yes, I am a glutton for punishment, and yes, I have good reason for doing so: if you use ems for shadows, and you use them consistently on all your shadowed elements, you get an effect similar to PhotoShop’s global shadows (because the shadow will then resize itself proportionately according to the font-size of the element).

You’ll notice there’s two keyframes for my shadows. That’s because the heart is made with overlapping elements and I don’t want the top element to cast a shadow on the one underneath.

@-webkit-keyframes shadows {
 from {
    box-shadow: .4875em .1875em .1875em rgba(90, 90, 90, .5);
      }
 to {
    box-shadow: .875em .3875em .4875em rgba(90, 90, 90, .35);
    }
}
@-webkit-keyframes shadows-side {
 from {
    box-shadow: -.4875em .1875em .1875em rgba(90, 90, 90, .5);
}
 to {
    box-shadow: -.0875em .3875em .4875em rgba(90, 90, 90, .35);
 }
}

Plugging in the keyframes

To keep the animations timed well, I use the same duration for all the elements. You can name the keyframe what ever you want, I’m big on semantics, so either “pulse” or “beat” makes the most sense to me.

.heart span{
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

You can use these basic keyframes snippets to make a myriad of animations. CSS3 timers, clocks, and even curious shadow effects are a natural result. But whatever you do, please don’t make another marquee. One was enough.