Skip to content

Instantly share code, notes, and snippets.

@lagden

lagden/Fullpage.html

Created June 19, 2012 23:48
Show Gist options
  • Save lagden/2957201 to your computer and use it in GitHub Desktop.
Save lagden/2957201 to your computer and use it in GitHub Desktop.
Download ZIP
A web page created at CodePen.io
Raw
Fullpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen &middot; A Pen by lagden</title>
<style>
/* begin mixin */
/* end mixin */
body {
font-family: helvetica, sans-serif;
font-size: 100%;
color: #333;
background-color: #ddd;
}
#page {
width: 500px;
padding: 50px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #333;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h2.ribbon {
width: 90%;
position: relative;
margin: 20px 0;
padding: 0;
color: white;
text-transform: uppercase;
font-size: 26px;
font-weight: bold;
font-style: italic;
}
h2.ribbon span {
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
background-color: red;
}
h2.ribbon span a {
color: white;
text-decoration: none;
}
h2.ribbon span:before {
top: -15px;
left: 0;
content: "\0020";
position: absolute;
width: 12px;
min-height: 70px;
display: block;
background-color: transparent;
background-repeat: no-repeat;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAABGCAYAAAD4tnXtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcxJREFUeNq8l01vwyAMhsEklXrZaZed9v//YhLwTGUyQ7GBHRYJNWr9+OtNwXHOOe8WrmwMfI/ie7SAjQ2wMUYNeAgAFbgCnsIoGfANfLBhb71FysAnrUjr4s8eVAFfbHgKKHYALMA3G54COhlq63LwoMt7v3N7A+sShD7Vlb/MTAEK5JXlABG3vAja2IFcvhfh5R0AgkjFN63/BThCSCmFfd/DTITbcwihyncIUCRoi3wDyGsxDkoqFQykQeu5ayiLvosU92qXtpk0JNgTCqz/uTT0/GzZNbx1AcDcRXop2cJRZ3xWOH9a3dFq0EAvAdcYO/PR0PptFe2NB86PADOdng7DnRxmc7eKbh34XgS/0qWl6/+AqfOtAJpB99iCWc9tBJyFQDk5cRZApQ6zaJxtK9K2OUwL2pOSoVYXlJsxxhg1QzVC90y2ir5/oKNrWLT0nI7jcFbhvZTSSLjUMdJExNylO4K4V7uVN+NiiBNRHJAGkb3HmfRAzkdNJFW4G8iKD4Ujr1dOh46qeJ5nVGa+KsJrCiOF5eimd4kjXKTwZUyVVQSyPcqsd4lZrzu/Lg+JfxpDlwfd5VF6eVhffh1YfuFY3vKXXpp+BBgAJ4tDuRr9Ie8AAAAASUVORK5CYII=");
background-position: 0% 0%;
}
h2.ribbon:before, h2.ribbon:after {
content: "\0020";
position: absolute;
width: 0;
height: 0;
}
h2.ribbon:before {
width: 10px;
right: -30px;
bottom: -10px;
border-width: 20px 20px;
border-style: solid;
border-color: #cc0000 transparent #cc0000 #cc0000;
}
h2.ribbon:after {
right: 0;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #990000 transparent transparent #990000;
}
h2.ribbon.red span {
background-color: #990000;
}
h2.ribbon.red:before {
border-color: #660000 transparent #660000 #660000;
}
h2.ribbon.red:after {
border-color: #330000 transparent transparent #330000;
}
h2.ribbon.green span {
background-color: #009900;
}
h2.ribbon.green:before {
border-color: #006600 transparent #006600 #006600;
}
h2.ribbon.green:after {
border-color: #003300 transparent transparent #003300;
}
h2.ribbon.blue span {
background-color: #000099;
}
h2.ribbon.blue:before {
border-color: #000066 transparent #000066 #000066;
}
h2.ribbon.blue:after {
border-color: #000033 transparent transparent #000033;
}
</style>
<style>
#codepen-footer, #codepen-footer * {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#codepen-footer {
display: block !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
padding: 0 10px !important;
margin: 0 !important;
height: 30px !important;
line-height: 30px !important;
font-size: 12px !important;
color: #eeeeee !important;
background-color: #505050 !important;
text-align: left !important;
background: -webkit-linear-gradient(top, #505050, #383838) !important;
background: -moz-linear-gradient(top, #505050, #383838) !important;
background: -ms-linear-gradient(top, #505050, #383838) !important;
background: -o-linear-gradient(top, #505050, #383838) !important;
border-top: 1px solid black !important;
border-bottom: 1px solid black !important;
border-radius: 0 !important;
box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
z-index: 300 !important;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
}
#codepen-footer a {
color: #a7a7a7 !important;
text-decoration: none !important;
}
#codepen-footer a:hover {
color: white !important;
}
</style>
</head>
<body>
<div id="page">
<h1>CSS3 Ribbons</h1>
<h2 class="ribbon red">
<span>Ribbon Sample</span>
</h2>
<p>\o/</p>
<h2 class="ribbon green">
<span>Ribbon Sample</span>
</h2>
<p>:D</p>
<h2 class="ribbon blue">
<span>Ribbon Sample</span>
</h2>
<p>;)</p>
</div>
<div id="codepen-footer">
<a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a>
&nbsp;
<a href="/lagden/pen/1/2">Edit this Pen</a>
</div>
</body>
</html>
Raw
index.html
<div id="page">
<h1>CSS3 Ribbons</h1>
<h2 class="ribbon red">
<span>Ribbon Sample</span>
</h2>
<p>\o/</p>
<h2 class="ribbon green">
<span>Ribbon Sample</span>
</h2>
<p>:D</p>
<h2 class="ribbon blue">
<span>Ribbon Sample</span>
</h2>
<p>;)</p>
</div>
Raw
style.scss
@import "compass";
/* begin mixin */
@mixin ribbon($color: #FF0000, $width: 90%){
$colorLight: lighten( $color, 10% );
$colorLighter: lighten( $color, 20% );
$colorDark: darken( $color, 10% );
$colorDarker: darken( $color, 20% );
width: $width;
position: relative;
margin: 20px 0;
padding: 0;
color: white;
text-transform: uppercase;
font-size: 26px;
font-weight: bold;
font-style: italic;
span{
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
background-color: $color;
a{
color: white;
text-decoration:none;
}
&:before {
top: -15px;
left: 0;
content: "\0020";
position: absolute;
width: 12px;
min-height: 70px;
display: block;
// Shadow effect
background-color: transparent;
background-repeat: no-repeat;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAABGCAYAAAD4tnXtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAcxJREFUeNq8l01vwyAMhsEklXrZaZed9v//YhLwTGUyQ7GBHRYJNWr9+OtNwXHOOe8WrmwMfI/ie7SAjQ2wMUYNeAgAFbgCnsIoGfANfLBhb71FysAnrUjr4s8eVAFfbHgKKHYALMA3G54COhlq63LwoMt7v3N7A+sShD7Vlb/MTAEK5JXlABG3vAja2IFcvhfh5R0AgkjFN63/BThCSCmFfd/DTITbcwihyncIUCRoi3wDyGsxDkoqFQykQeu5ayiLvosU92qXtpk0JNgTCqz/uTT0/GzZNbx1AcDcRXop2cJRZ3xWOH9a3dFq0EAvAdcYO/PR0PptFe2NB86PADOdng7DnRxmc7eKbh34XgS/0qWl6/+AqfOtAJpB99iCWc9tBJyFQDk5cRZApQ6zaJxtK9K2OUwL2pOSoVYXlJsxxhg1QzVC90y2ir5/oKNrWLT0nI7jcFbhvZTSSLjUMdJExNylO4K4V7uVN+NiiBNRHJAGkb3HmfRAzkdNJFW4G8iKD4Ujr1dOh46qeJ5nVGa+KsJrCiOF5eimd4kjXKTwZUyVVQSyPcqsd4lZrzu/Lg+JfxpDlwfd5VF6eVhffh1YfuFY3vKXXpp+BBgAJ4tDuRr9Ie8AAAAASUVORK5CYII=');
background-position: 0% 0%;
}
}
&:before,
&:after{
content: "\0020";
position: absolute;
width: 0;
height: 0;
}
&:before{
width: 10px;
right: -30px;
bottom: -10px;
border-width: 20px 20px;
border-style: solid;
border-color: $colorDark transparent $colorDark $colorDark;
}
&:after{
right: 0;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: $colorDarker transparent transparent $colorDarker;
}
}
@mixin ribbonColor($color: #FF0000){
$colorLight: lighten( $color, 10% );
$colorLighter: lighten( $color, 20% );
$colorDark: darken( $color, 10% );
$colorDarker: darken( $color, 20% );
span{
background-color: $color;
}
&:before{
border-color: $colorDark transparent $colorDark $colorDark;
}
&:after{
border-color: $colorDarker transparent transparent $colorDarker;
}
}
/* end mixin */
body
{
font-family: helvetica, sans-serif;
font-size: 100%;
color: #333;
background-color: #ddd;
}
#page
{
width: 500px;
padding: 50px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #333;
@include box-sizing('border-box');
}
$red: #990000;
$green: #009900;
$blue: #000099;
h2.ribbon
{
@include ribbon;
&.red{ @include ribbonColor($red); }
&.green{ @include ribbonColor($green); }
&.blue{ @include ribbonColor($blue); }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment