Created
September 2, 2011 13:53
-
-
Save thunsaker/1188641 to your computer and use it in GitHub Desktop.
GitHub Custom Ribbon in CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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