How to Create CSS3 Ribbons Without Images. In my last post, Pure CSS3 Speech Bubbles Without Images, we saw how the :before and :after pseudo-elements could be used to create different effects. In this post we’ll use similar techniques to create a variety of ribbons. Ribbon effects are in vogue. Most designers use positioned images, but we’ll create them without using border effects and a single h2 tag: <h2>My Heading</h2> Let’s give this a little style and make it overlap the containing element: In this example, our #page has 50px of padding and a 1px border. Now we need to create the folded part of the ribbon which goes ‘behind’ the page.
It’s looking great and that might be all you need. That’s nice, but what about a folded-back ribbon effect on the left-hand edge? The border color of the pseudo-elements much match the background color of the h2 since it actually appears above the title. Please see the demonstration page for an example which shows all three ribbon styles. Who needs Photoshop?!
365psd | Download a free PSD every day. Ultimate CSS Gradient Generator - ColorZilla.com. HTML 5. Hover. Sliders. Piotr Kwiatkowski. Ui Parade. MobiScroll.
Ajax preloader. Presentation. HTML 5. Layer Styles. Simple Modal.