Re: Wrap-around ribbons with CSS

Post Preview

postName: jkatebin
postComment: "Nice! I'm starting out in CSS too, I made a few mod's to your code:\n1) Repeated it for header levels 1-6\n2) (most important imo) Removed the hard-coded width restrictions. Tried messing with percentages, padding, margins and such but never got a workable result. Ended up just using jQuery (call it in my main _layout page so if I use these ribbons on any other page it automatically resizes them.\n\nI'm new to jquery too, so I'm sure this can be improved. As a coder, I hate using the 'copy-paste multiple times' type approach I've used below. Surely there's some way to just do a range (h1-h7) in a single css/query statement?\n\n\njquery:\n$(function () {\n //\n // Resize all the ribbon header elements to match their div's\n //\n $(\".ribbon h1\").each(function (e) { $(this).width($(this).closest(\".ribbon\").width() + 12); });\n $(\".ribbon h2\").each(function (e) { $(this).width($(this).closest(\".ribbon\").width() + 12); });\n $(\".ribbon h3\").each(function (e) { $(this).width($(this).closest(\".ribbon\").width() + 12); });\n $(\".ribbon h4\").each(function (e) { $(this).width($(this).closest(\".ribbon\").width() + 12); });\n $(\".ribbon h5\").each(function (e) { $(this).width($(this).closest(\".ribbon\").width() + 12); });\n $(\".ribbon h6\").each(function (e) { $(this).width($(this).closest(\".ribbon\").width() + 12); });\n});\n\n\ncss:\n\n.ribbon {\n width: 100%;\n margin: 10px auto;\n padding: 0 10px 0;\n position: relative;\n color: #444;\n background: #fff;\n border: 1px solid #d2d2d2;\n border-radius: 3px;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n}\n\n.ribbon h1, .ribbon h2, .ribbon h3, .ribbon h4, .ribbon h5, .ribbon h6, .ribbon h7 {\n display: block;\n line-height: 1.3;\n margin: 0;\n padding: 5px 10px;\n position: relative;\n left: -16px;\n top: 8px;\n color: #cfcfcf;\n text-shadow: 0 1px 1px #111;\n border-top: 1px solid #363636;\n border-bottom: 1px solid #202020;\n background: #333;\n background: linear-gradient(top, #383838 0%, #262626 100%);\n border-radius: 2px 2px 0 0;\n box-shadow: 0 1px 2px rgba(0,0,0,0.3);\n}\n\n\n.ribbon h1::before, .ribbon h1::after, .ribbon h2::before, .ribbon h2::after, .ribbon h3::before, .ribbon h3::after, .ribbon h4::before, .ribbon h4::after, .ribbon h5::before, .ribbon h5::after, .ribbon h6::before, .ribbon h6::after {\n content: '';\n display: block;\n width: 0;\n height: 0;\n position: absolute;\n bottom: -11px;\n z-index: -10;\n border: 5px solid;\n border-color: #242424 transparent transparent transparent;\n}\n\n.ribbon h1::before, .ribbon h2::before, .ribbon h3::before, .ribbon h4::before, .ribbon h5::before, .ribbon h6::before {\n left: 0;\n}\n\n.ribbon h1::after, .ribbon h2::after, .ribbon h3::after, .ribbon h4::after, .ribbon h5::after, .ribbon h6::after {\n right: 0;\n}\n\n\n.ribbon p {\n margin: inherit;\n}\n"

rating: 0+x
This is the Redirect module that redirects the browser directly to the "http://snippets.wdfiles.com/local--code/code:url-title-with-slash-redirect/2#http://css3.wikidot.com/blog:wrap-around-ribbons-with-css" page.
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.