Skip to content

Instantly share code, notes, and snippets.

@ream88

ream88/collegia-webfont.eot

Forked from tpryan/ribbon.html
Created February 9, 2012 15:20
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ream88/1780637 to your computer and use it in GitHub Desktop.
Save ream88/1780637 to your computer and use it in GitHub Desktop.
Download ZIP
Github Ribbon in CSS.
Display the source blob
Display the rendered blob
Raw
collegia-webfont.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
ribbon.html
<!DOCTYPE html>
<html>
<head>
<title>Banner Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/*
* Generated by Font Squirrel (http://www.fontsquirrel.com) on February 9, 2012
* Orginal font http://www.fontriver.com/font/collegiate
*/
@font-face {
font-family: 'CollegiateRegular';
src: url('collegia-webfont.eot');
src: url('collegia-webfont.eot?#iefix') format('embedded-opentype'),
url('collegia-webfont.woff') format('woff'),
url('collegia-webfont.ttf') format('truetype'),
url('collegia-webfont.svg#CollegiateRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body{
padding: 0;
margin: 0;
}
#banner{
height: 149px;
width: 149px;
overflow:hidden;
padding: 0;
margin: 0;
}
#banner a{
-webkit-font-smoothing: antialiased;
display: block;
width: 190px;
font-size: 16px;
font-family: CollegiateRegular, Helvetica, Arial, sans-serif;
background-color: #333;
color: #ecedee;
word-spacing: 2px;
text-decoration: none;
padding: 5px 15px 5px 25px;
position:relative;
left: 20px;
top: -37px;
text-align: center;
-moz-transform-origin: 0 0 ;
-moz-transform:rotate(45deg);
-moz-box-shadow: 1px 1px 5px 1px #666;
-webkit-transform-origin: 0 0 ;
-webkit-transform:rotate(45deg);
-webkit-box-shadow: 1px 1px 5px 1px #666;
-ms-transform-origin: 0 0 ;
-ms-transform:rotate(45deg);
-ms-box-shadow: 1px 1px 5px 1px #666;
transform-origin: 0 0 ;
transform:rotate(45deg);
box-shadow: 1px 1px 5px 1px #666;
background-image: linear-gradient(bottom, #000000 3%, #666666 5%, #000000 7%, #000000 93%, #666666 95%, #000000 97%);
background-image: -o-linear-gradient(bottom, #000000 3%, #666666 5%, #000000 7%, #000000 93%, #666666 95%, #000000 97%);
background-image: -moz-linear-gradient(bottom, #000000 3%, #666666 5%, #000000 7%, #000000 93%, #666666 95%, #000000 97%);
background-image: -webkit-linear-gradient(bottom, #000000 3%, #666666 5%, #000000 7%, #000000 93%, #666666 95%, #000000 97%);
background-image: -ms-linear-gradient(bottom, #000000 3%, #666666 5%, #000000 7%, #000000 93%, #666666 95%, #000000 97%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.03, #000000),
color-stop(0.05, #666666),
color-stop(0.07, #000000),
color-stop(0.93, #000000),
color-stop(0.95, #666666),
color-stop(0.97, #000000)
);
}
</style>
</head>
<body>
<div id="banner"><a href="">Fork me on GitHub</a></div>
<a href="http://github.com/you"><img style="position: absolute; top: 0; left: 149px; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment