Created
January 12, 2012 21:02
-
-
Save Lane/1603090 to your computer and use it in GitHub Desktop.
Wrap around headings
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
| /** | |
| * Wrap around headings | |
| */ | |
| body{ | |
| font: 87.5%/150% "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| background: linear-gradient(top, #ffe,#ffc); | |
| padding: 20px; | |
| margin: 80px; | |
| background-attachment: fixed; | |
| min-height:100%; | |
| } | |
| .box { | |
| background:#fff; | |
| border-radius: 5px; | |
| width: 35em; | |
| margin:0 auto; | |
| position:relative; | |
| font-size: 1em; | |
| padding: 0.625em; | |
| border: 1px solid #e0e0e0; | |
| box-shadow: 1px 1px 6px rgba(0,0,0,0.1); | |
| } | |
| .box p { } | |
| .box ul li { } | |
| .box ul li ul { list-style: none; padding: 0; font-size: 0.95em; } | |
| .box ul li ul li { color: #999; } | |
| .box h2 { | |
| background: #666; | |
| color:#fff; | |
| width: 35em; | |
| position:relative; | |
| left:-0.9375em; | |
| font-size: 1em; | |
| padding: 0.625em 0.9375em; | |
| box-shadow: 2px 2px 6px rgba(0,0,0,0.3); | |
| border-radius: 3px 3px 0px 0px; | |
| margin-top: -0.05em; | |
| } | |
| .box h2:before { | |
| content: ""; | |
| position: absolute; | |
| bottom: -0.3125em; | |
| right:0px; | |
| border-width: 0 0 0.3125em 0.3125em; | |
| border-style: solid; | |
| border-color: transparent #333; | |
| } | |
| .box h2:after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -0.3125em; | |
| left:0px; | |
| border-width: 0 0.3125em 0.3125em 0px; | |
| border-style: solid; | |
| border-color: transparent #333; | |
| } |
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
| <!-- content to be placed inside <body>…</body> --> | |
| <div class="box"> | |
| <h2>Wrapping Headers</h2> | |
| <p>This is a demo of pure html/css wrapping headers. The headers are created using :before and :after with borders on specific corners to create the illusion that the background of the header wraps around its container. Box shadows are used to further enhance that illusion.</p> | |
| <h3>Browser Support</h3> | |
| <ul> | |
| <li>Firefox 3.6+</li> | |
| <li>Chrome 12+</li> | |
| <li>Safari 3+</li> | |
| <li>Internet Explorer 9+ | |
| <ul> | |
| <li>Internet Explorer 8 and below do not display wrap around triangles, but still display in a useable manner</li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </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
| {"view":"split","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment