Redoing the GitHub Ribbon in CSS

I've been seeing these "Fork me on GitHub" ribbons popping up seemingly everywhere, which made me wonder how hard it would be to recreate the ribbons without images, using only CSS. Making the ribbons turned out to be a fun introduction to some new CSS toys in upcoming browsers.

The code to make a ribbon:

      <link rel="stylesheet" type="text/css" href="ribbon.css">
      [...]
      <div class="left ribbon-holder">
        <a href="#" class="red ribbon">
          <span class="text">Fork me on GitHub</span>
        </a>
      </div>
      

The first trick I went for was -moz-transform (-webkit-transform). A simple -moz-transform: rotate(45deg) and I have a ribbon ready for the right corner.

Once I tweaked the colors enough to look passable, the glaring inconsistency was the font. The GitHub images don't use one of the 9 or so web-safe fonts, which almost made me stop trying. But looking at the blog post again, they mention that the font is Collegiate, which is freely available on fontriver.com. Using the new @font-face, I can make the ribbon font match the image exactly:

      @font-face {
        font-family: Collegiate;
        src: url("Collegiate.ttf");
      }
      .ribbon {
        font-family: Collegiate, sans-serif;
      }
      

I wasn't excited about @font-face until I found a real usage like this.

The blur surrounding the ribbon is achieved through -moz-box-shadow. -moz-box-shadow: 0 0 13px #888; creates a dark shadow with no vertical or horizontal offset and a blur radius of 13px.

The last goody is -webkit-gradient, which is unfortunately only available in Webkit at this point. I hope it finds its way into Firefox soon. The ribbon images have a small background gradient which I recreate for the orange ribbon with:

      .orange.ribbon {
        background: -webkit-gradient(linear, left bottom, left top,
                                     from(#dc7202), to(#ee7906));
      }
      

Of course, this isn't perfect. It's certainly easier to embed an image that works in any browser, but I think there's some compelling benefits to this method. For a web developer like me, it's much easier to customize the text and colors in CSS than it is to find someone who knows Photoshop.

I think that's the powerful idea in the next generation of browsers. They're taking a lot of the issues where we had to rely on tools outside the browser, like image editors and Flash, and moving them into the web space. It's a good time to be a web developer.