Skip to content

Instantly share code, notes, and snippets.

@thunsaker

thunsaker/git-hub-ribbon-custom.html

Created September 2, 2011 13:53
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save thunsaker/1188641 to your computer and use it in GitHub Desktop.
Save thunsaker/1188641 to your computer and use it in GitHub Desktop.
Download ZIP
GitHub Custom Ribbon in CSS
Raw
git-hub-ribbon-custom.html
<!-- Add to the <head> section -->
<style type="text/css">
.git-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;
}
.git-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;
}
</style>
<!-- Add to the page on which you would like the ribbon to appear. -->
<div class="git-ribbon">
<a href="http://github.com/GIT_USERNAME" rel="me">Find me on GitHub</a>
</div>
<!--
Credit goes to unindented.org for the ribbon css
http://unindented.org/articles/2009/10/github-ribbon-using-css-transforms/
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment