William Cunningham
Pattern
UI
→
Ribbon
Everybody loves ribbons
HTML
Everybody loves ribbons
CSS
.ribbon { font-size: 16px !important; /* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */ width: 50%; position: relative; background: #ba89b6; color: #fff; text-align: center; padding: 1em 2em; /* Adjust to suit */ margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */ } .ribbon:before, .ribbon:after { content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid #986794; z-index: -1; } .ribbon:before { left: -2em; border-right-width: 1.5em; border-left-color: transparent; } .ribbon:after { right: -2em; border-left-width: 1.5em; border-right-color: transparent; } .ribbon .ribbon-content:before, .ribbon .ribbon-content:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #804f7c transparent transparent transparent; bottom: -1em; } .ribbon .ribbon-content:before { left: 0; border-width: 1em 0 0 1em; } .ribbon .ribbon-content:after { right: 0; border-width: 1em 1em 0 0; } .non-semantic-protector { position: relative; z-index: 1; }
hide
Material Design
Material Design Depth Shadows
Shelter
Accordian
Material Design Depth Shadows
UI
Columns
Container
CSS Buttons
CSS Marquee
Data Table
Fancy Ampersand
Featured banner
Full Width Responsive Tiled Menu with CSS
Gradient Underlines
HTML Test Page for CSS Style Guide
Inserting content with CSS3 using :before and :after pseudo-elements
Ribbon
Stitched Look
UL cards w/ shadow