Use CSS3 to create a fancy centered heading overlaying a horizontal line.

This techniques looks somewhat graphic-like, but will not use images.

Instead it uses the flexibility of CSS3 gradients to create a line behind the heading. In HTML, nest a element, around the text (required) and then the CSS:

001 h1 {
002 background: linear-gradient(#ae4e1e 0%, #ae4e1e 45%, #fff 46%, #fff 54%, #ae4e1e 54%, #ae4e1e 100%);
003 }
005 h1 span {
006 background: #ae4e1e;
007 padding: 0 20px
008 }

To achieve this effect, the span element is given the same background colour as the parent element holding the content. The gradient uses multiple colour stops, positions at intervals that avoid any kind of transition.

From: The Web design book Vol2


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s