Tom’s Two Cents: Create Fancy Headers using CSS

November 21, 2014

Blog | Development | Tom’s Two Cents: Create Fancy Headers using CSS
Tom’s Two Cents: Create Fancy Headers using CSS

If you’re familiar with CSS, you know it’s the sister technology to HTML used to style web pages. As the resident CSS expert, I’m always learning new CSS tricks when developing client websites and I want to share a simple but effective way to make your headers stand out using CSS.

Taking inspiration from Chris Coyier’s article, I put together this demo for you.

What stands out about my demo is that the headers only use one pseudo-element and aren’t limited by static width dimensions. Plus, you can pretty much do whatever you want with them, (change background colors, gradients, multiple borders…). 

The only drawback I see is that it uses extra markup (the ) to make the words padded, but that’s a minor issue on the developer panic scale.

What CSS tricks do you have up your sleeve? Share them with us @GeekHive.

 

Tom Deluca, Front-End Developer, GeekHive

Tom DeLuca

Developer
Tags
  • CSS

Recent Work

Check out what else we've been working on