Skip to content

Instantly share code, notes, and snippets.

@webcane
Forked from anonymous/index.html
Last active December 10, 2015 09:18
Show Gist options
  • Save webcane/4413186 to your computer and use it in GitHub Desktop.
Save webcane/4413186 to your computer and use it in GitHub Desktop.
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
/* reset */
html, body, div, span, applet, object, iframe,
h1, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
body {
font-family: Arial, sans-serif;
color: #333;
background: #eee;
}
.ribbon {
overflow: hidden;
height: 150px;
width: 150px;
/* top right corner */
position: absolute;
top: 0;
right: 0;
padding: 0;
margin: 0;
z-index: 10;
}
.ribbon a {
display: block;
width: 220px;
position: relative;
left: 25px;
top: -25px;
text-align: center;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
box-shadow: 1px 1px 5px 1px #aaa;
-webkit-box-shadow: 1px 1px 5px 1px #aaa;
-moz-box-shadow: 1px 1px 5px 1px #aaa;
-o-box-shadow: 1px 1px 5px 1px #aaa;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
padding: 8px 0;
}
a#orange {
background-color: #EE7600;
color: white;
border: 1px solid #EFAB62;
text-shadow: 0 0 4px #666;
}
a:hover#orange {
text-shadow: 0 0 8px #333;
}
</style>
<title>css3 github ribbon by cane</title>
</head>
<body>
<div class="ribbon"><a href="https://github.com/webcane/ocajp7" alt="Fork me on GitHub" id="orange">Fork me on GitHub</a></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment