Whether you’re designing a website or a web application, you’ll need custom styles for headings like h1 or h2. In this article you’ll learn how to create some cool headings effects using CSS pseudo-elements.
So, why pseudo-elements? The answer is very simple: there is no need to add extra markup. This fit perfectly for the heading we’re going to create here.
As you can see above, there is no rocket science here. Just a simple HTML heading with a CSS class that will properly style it. All the other headings use a similar HTML structure, so it can’t easier than that.
Noticed the background-clip: padding-box declaration? This will help you achieve a cool effect: transparent borders for the main wrapper. Basically, the [background-clip](https://developer.mozilla.org/en/CSS/background-clip) CSS property specifies whether an element’s background, either the color or image, extends underneath its border.
_Browser support for background-clip: Safari 5+, Chrome 7+, Firefox 3.6+, Opera 10+, IE 9+ _
Below is a simple and good looking effect made using CSS border property:
This style is made using a CSS triangle shape, you’ve seen this before here:
The below HTML heading style is created using the ribbon effect: