Webmasters Gallery

I like to think of CSS as a love language. If written well, it can be as lovely as poetry. There are rules, semantics and, like love itself, it can be communicated in many ways. Consider the variety of options we have to write black in CSS:

• #000000
• #000
• rgb(0, 0, 0)
• hsla(360, 100%, 0%, 1)
• black

In the spirit of Valentine’s Day, I thought it would be fun to push this concept a little further with the many ways we can make hearts in HTML & CSS.

A Plain ol’ Background Image

We can call an image of a heart and set it as the background of an element.

.heart {
  background-image: url("heart.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

See the Pen I Heart You – Background Image by CSS-Tricks (@css-tricks) on CodePen.

HTML & ASCII Symbols

That’s right. We can let the web do the drawing for us.

.heart {
  content: '&#9829';
}

See the Pen I Heart You – ASCII by CSS-Tricks (@css-tricks) on CodePen.

CSS Shape

Hearts are complicated in real life but they’re just two circles and a rotated square in CSS:

We can draw that with a single element, thanks to the ::before and ::after pseudo elements.

.heart {
  background-color: red;
  display: inline-block;
  height: 30px;
  margin: 0 10px;
  position: relative;
  top: 0;
  transform: rotate(-45deg);
  width: 30px;
}

.heart:before,
.heart:after {
  content: "";
  background-color: red;
  border-radius: 50%;
  height: 30px;
  position: absolute;
  width: 30px;
}

.heart:before {
  top: -15px;
  left: 0;
}

.heart:after {
  left: 15px;
  top: 0;
}

See the Pen I Heart You – CSS Shape by CSS-Tricks (@css-tricks) on CodePen.

Icon Font

Icon fonts got pummeled in a cage match with inline SVG, but they still do the trick here. We would need our heart icon in various font file formats and apply it using @font-face, but we’ll use the We Love Icon Fonts site to generate that for us.

@import url(http://weloveiconfonts.com/api/?family=entypo);

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  color: red;
}

See the Pen I Heart You – Icon Font by CSS-Tricks (@css-tricks) on CodePen.

Inline SVG

OK, well, this isn’t exactly CSS but we love SVG around here at CSS-Tricks.

I 

<svg class="heart" viewBox="0 0 32 29.6">
  <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
	c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
</svg> 

You

Let’s add a pulse animation just as an excuse to sprinkle in some CSS.

.heart {
  fill: red;
  position: relative;
  top: 5px;
  width: 50px;
  animation: pulse 1s ease infinite, 
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

See the Pen I Heart You – SVG by CSS-Tricks (@css-tricks) on CodePen.

Share the Love

There are undoubtedly more ways we can go about this. Share your Pens in the comments and we’ll add them to the collection.

And, of course, happy (slightly late) Valentine’s Day!

---

I Heart CSS is a post from CSS-Tricks