Created
June 26, 2012 15:41
-
-
Save keithwyland/2996521 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>Ribbon Heading · CodePen</title> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| background-color: #444; | |
| padding: 0 30px; | |
| } | |
| article { | |
| background-color: white; | |
| width: 50%; | |
| box-shadow: -1px 3px 2px black; | |
| } | |
| h2 { | |
| background: linear-gradient(#090 0%, #0d0 30%, #0d0 70%, #090 100%) repeat scroll 0 0 transparent; | |
| box-shadow: 5px 5px 5px -4px #000; | |
| border-radius: 2px 0px 0px 1px; | |
| color: #333333; | |
| font-size: 1.5em; | |
| margin: 0 -5px 0 -15px; | |
| padding: 10px 10px 10px 20px; | |
| position: relative; | |
| text-shadow: 0 0 3px #fff; | |
| } | |
| h2:before { | |
| border-color: #090 transparent transparent; | |
| border-style: solid; | |
| border-width: 15px 0 0 15px; | |
| content: ""; | |
| left: 0; | |
| position: absolute; | |
| bottom: -15px; | |
| z-index: -1; | |
| } | |
| article p { | |
| padding: 15px 15px 0 15px; | |
| } | |
| </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> | |
| <script> | |
| // Kill alerts, confirmations and prompts | |
| window.alert = function(){}; | |
| window.confirm = function(){}; | |
| window.prompt = function(){}; | |
| window.open = function(){}; | |
| window.print = function(){}; | |
| </script> | |
| <script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script> | |
| </head> | |
| <body> | |
| <article> | |
| <p>This is a ribbon heading that uses only the semantic <code><h2></code> element.</p> | |
| <h2>Ribbon Heading</h2> | |
| <p>This is a ribbon heading that uses only the semantic <code><h2></code> element.</p> | |
| <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> | |
| </article> | |
| <script src="http://codepen.io/javascripts/libs/modernizr.js"></script> | |
| <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="/keithwyland/pen/ribbon/1">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
| <article> | |
| <p>This is a ribbon heading that uses only the semantic <code><h2></code> element.</p> | |
| <h2>Ribbon Heading</h2> | |
| <p>This is a ribbon heading that uses only the semantic <code><h2></code> element.</p> | |
| <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> | |
| </article> |
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
| body { | |
| font-family: sans-serif; | |
| background-color: #444; | |
| padding: 0 30px; | |
| } | |
| article { | |
| background-color: white; | |
| width: 50%; | |
| box-shadow: -1px 3px 2px black; | |
| } | |
| h2 { | |
| background: linear-gradient(#090 0%, #0d0 30%, #0d0 70%, #090 100%) repeat scroll 0 0 transparent; | |
| box-shadow: 5px 5px 5px -4px #000; | |
| border-radius: 2px 0px 0px 1px; | |
| color: #333333; | |
| font-size: 1.5em; | |
| margin: 0 -5px 0 -15px; | |
| padding: 10px 10px 10px 20px; | |
| position: relative; | |
| text-shadow: 0 0 3px #fff; | |
| } | |
| h2:before { | |
| border-color: #090 transparent transparent; | |
| border-style: solid; | |
| border-width: 15px 0 0 15px; | |
| content: ""; | |
| left: 0; | |
| position: absolute; | |
| bottom: -15px; | |
| z-index: -1; | |
| } | |
| article p { | |
| padding: 15px 15px 0 15px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment