A CSS3 Github Ribbon for your github-based projects

  • By Denis Ciccale
  • Last update: Jul 31, 2021
  • Comments: 1

CSS3 Github Ribbon

Use this CSS3 Github Ribbon on your github-based projects, it's fully customizable!

Usage

Just link css3-github-ribbon.css on your html document and paste the github link on it:

<a href="https://github.com/dciccale/css3-github-ribbon" class="github-ribbon">
  Fork me on GitHub
</a>

Live demo

Options

You will need Stylus and Node.js to compile the modified .styl file

Background color

Change the $bgcolor variable to any valid CSS color.

$bgcolor papayaWheep

Text color

Change the $color variable to any valid CSS color.

$color #222

Position

Change the $position variable to one of these two values: 'top-right' (default) or 'top-left'.

$position 'top-right'

Known issues and fixes

  • Unintended horizontal scrolling can cut the edges of the ribbon

To fix this add the following code to the .styl file

body
  overflow-x none

License

See LICENSE.txt

Github

https://github.com/dciccale/css3-github-ribbon

Comments(1)

  • 1

    horizontal scroll issue

    this looks good! bit of a show-stopper for me though: is it possible to eliminate the horizontal scrolling that occurs because part of this element is positioned off-screen (and in some tidy way so i don't have to introduce any new global css to my page)?