Monthly Archives: September 2011

How To Create Github-style “Fork Me” Ribbons Using Only CSS

Githubribbons

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.

Amusing Video Tutorial: Let’s Suck at Github Together

If you want to learn more about using git and Github, or are a fan/user of git/Github (as I am) and want to pass along a video tutorial for others to see, you may enjoy this episode from Chris Coyier entitled “CSS-Tricks #101: Let’s Suck at GitHub Together“. As you can tell from the title, Chris doesn’t mind poking some fun at his own abilities – and his own aversion to the command-line and preference for GUI utilities.

For me personally, I’m rather “old skool” and typically prefer the command-line, but I appreciate that many people don’t… and I enjoyed Chris’ entertaining episode. Sure, as some commenters noted, there were a few minor inaccuracies/faults… but overall it did the job well in helping introduce people to what git and Github together can do. I can’t embed the video here, but if you click on the image below you’ll be taken to his site where you can view the episode…

Csstricks github video

And if you are over on Github, you can follow me there as github.com/danyork.

Want To Help Guide Git’s Development? Take the 2011 Git Users’s Survey!

Git logoDo you use the git version control system? If so, do you wish it worked a bit differently? Or did you find it hard to use in some way? If you don’t, did you try to start using it and found it difficult to understand?

If you are a git user in any way (or are trying to be), the Git community is LOOKING FOR YOUR INPUT in the Git User’s Survey 2011 at the address:

http://tinyurl.com/GitSurvey2011

As the main page of the Git community wiki asks:

Please devote a few minutes of your time to fill out the simple questionnaire; it’ll help the Git community understand your needs, what you like about Git (and what you don’t), and overall help us improve it.

The survey runs from now through October 3rd and the results will be posted on the Git wiki.

Being a git fan and user I did complete the survey which, true to the notice, did only take a few minutes to complete. As more of a “casual” user of git in that I use it for a variety of projects but don’t live in it as a full-time developer might, I actually found the survey quite educational in that I found names of a whole number of projects I want to explore.

If you do use git and have a few minutes, the folks behind Git would love your input!