Created
June 19, 2012 23:48
-
-
Save lagden/2957203 to your computer and use it in GitHub Desktop.
A web page created at CodePen.io
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>CodePen · 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> | |
| |
<a href="/lagden/pen/1/2">Edit this Pen</a> | |
</div> | |
</body> | |
</html> |
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
<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> |
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
@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