Unindented

For those of you who don't know, GitHub is a web-based hosting service for projects that employ the Git version control system. You can use GitHub to host your public and private projects, collaborate on them in a distributed way, and expand your social coding network.

If you want to show the world your love for GitHub, they put up some ribbons that you can overlay on your site. Unfortunately they are just PNG images, so if you want to make any modification, e.g. change the background color, you will have to download the provided PSD file and edit it with your tool of choice.

Using some of the features found in modern browsers, we will turn those images into HTML and CSS, so that we can style them as we please.

Check out the demo!

Superstylin'

First of all, let's see the HTML we will use for the ribbon. An extra div tag surrounding the link to our GitHub profile is all we need:

<div class="ribbon">
  <a href="#" rel="me">Fork me on GitHub</a>
</div>

Now let's try to replicate the look of the ribbon with some basic CSS:

.ribbon {
  background-color: #a00;
  overflow: hidden;
}
.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif;
  margin: 0.05em 0;
  padding: 0.5em 3.5em;
  text-align: center;
  text-decoration: none;
}

The only rule that may catch your eye is that overflow: hidden. Under some circumstances the text would span two lines, and this seemed to solve it.

Also, the font used for the original GitHub ribbon is Collegiate. I went with Helvetica instead, but feel free to experiment with @font-face if you want to stay faithful to the original design.

Anyway, here is what we've got:

To achieve the rotation effect, we will use the transform property. It is still in draft stage, so we will have to fall back on browser-specific declarations (-moz-transform for Firefox 3.5+, -webkit-transform for Safari 3.1+):

.ribbon {
  ...
  position: absolute;
  left: -3em;
  top: 2.5em;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

I'm applying a counterclockwise rotation of 45 degrees, and using the top and left properties to place the ribbon in the upper left corner of my page. Tweak those values according to your needs. We should be looking at something similar to this:

Let's give the ribbon the final touch using the text-shadow and box-shadow properties. The latter is in draft stage, so again we have to fall back on browser-specific declarations (-moz-box-shadow for Firefox 3.5+, -webkit-box-shadow for Safari 3.0+):

.ribbon {
  ...
  -moz-box-shadow: 0 0 1em #888;
  -webkit-box-shadow: 0 0 1em #888;
}
.ribbon a {
  ...
  text-shadow: 0 0 0.5em #444;
}

If you take a look at the documentation for those two properties, you will see I'm using shadows with no offset and a slight blur. The result:

It's not identical to the original, but I think it's a good enough approximation.

To sum up, this is all the CSS we used to build the ribbon:

.ribbon {
  background-color: #a00;
  overflow: hidden;
  /* top left corner */
  position: absolute;
  left: -3em;
  top: 2.5em;
  /* 45 deg ccw rotation */
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  /* shadow */
  -moz-box-shadow: 0 0 1em #888;
  -webkit-box-shadow: 0 0 1em #888;
}
.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif;
  margin: 0.05em 0 0.075em 0;
  padding: 0.5em 3.5em;
  text-align: center;
  text-decoration: none;
  /* shadow */
  text-shadow: 0 0 0.5em #444;
}

Browser support

As you can imagine, our ribbon will not be displayed properly by the majority of browsers:

Nevertheless, it's a useful technique with many compelling benefits. If you are only targeting modern browsers, go for it!