Can you create a “Fork Me On Github” ribbon using only CSS? And have it say some other message?
That was the question I asked myself while working on a new website (for the new job). You see, the new website is going to go online in a “preview” mode and I wanted some way to very clearly indicate to visitors that the site is still in development. I’ve seen the Github ribbons on many project sites and thought this might be a great way to do the kind of marking that I want to do.
The problem is that the “official” Github Ribbons are simply images that are overlaid on your site using absolute positioning in CSS.
With an image, of course, I can’t modify the text to have my own message. And while the PSD files are available for the ribbons, I didn’t want to get into modifying images.
I figured with the modern browsers we have I ought to somehow be able to do this using plain old text and Cascading Style Sheets.
Thankfully, I found out that Daniel Perez Alvarez had already done this with a wonderful walk-through:
He steps right through the process showing you exactly what you need to do in CSS to approximate the images.
John Balogh from Mozilla wrote a similar post a bit earlier with a slightly different recipe:
Both posts were helpful to me in learning more about how you can manipulate text using CSS.
Of course, the question is…
WILL THIS WORK IN MANY BROWSERS?
Daniel Perez Alvarez includes a table at the end of his post showing which browsers would support this technique as of when he wrote the post in October 2009. I’d like to hope that two years later more browsers will support these techniques… but then again, there are still people out there using IE6 so we can’t expect newer browsers to be widely deployed.
Still, for the target audience for my new website I’m going to expect many of the users will be using newer browsers – and I’m going to see what I can do to make it degrade gracefully (as in, not appear) for older browsers.
My ribbon looks great… and no, I can’t show it to you yet. 😉
Thanks to both Daniel Perez Alvarez and John Balogh for posting their tutorials online.
