David King

full stack developer

All Blog Articles

Prev « I freelance once more! Next » The view from my office window

Pure CSS ribbon titles

11 Jul 2011

Being a bit of a non-designer, if I want to add a quick bit of "wheee" to a page I sometimes put my ribbon titles onto my h1, h2, h3 etc tags in order to make them pop a little bit.

'Ribbon' Effect using pure CSS

But until submitting my entry onto CSS1K using such a technique I hadn't realised that it was considered such a neat trick; I guess you just never know what you're sitting on!

So the trick is wholly inspired by Nicolas Gallagher's pure css speech bubbles; however I use 2 pseudo-tags instead of 1. Whether you've read and assimilated that link or not, lets code

<div id="container">
	<h1>This is my title</h1>
	/* Just to align the container */
	#container {width: 400px; margin: 30px auto; text-align: center; padding: 100px 0; background: #EEEEEE;}
	/* The important bit */
	h1 {position: relative; margin: 0 -25px; font-size: 40px; background: #0088AA; color: #FFFFFF; text-shadow: 1px 1px 0px #1A5D6E; box-shadow: 0 0 10px #AAA;}
	h1:before {content: ""; display: block; position: absolute; bottom: -25px; width: 0; height: 0; border-style: solid; border-color: #1A5D6E transparent;}
	h1:before {border-width: 25px 0 0 25px; left: 0;}
	h1:after  {border-width: 25px 25px 0 0; right: 0;}

And BOOOOOM; ribbons with no extra markup. Awesome. Just tweak the numbers for different sizes, and view the inspiration for the logic and workings (it's not my place to take credit for that!)

Prev « I freelance once more! Next » The view from my office window