How to Create Custom H2 tags like this site

[pvijeh]

Hello all!

I am interested in creating similar h2 tags to the ones in this website:

view-source:http://www.jackcolton.com/guides/what-are-las-vegas-dress-codes/

I like the trapezoidal shape of the background highlighting and also how two colors are used.

Can anyone point me toward a tutorial that explains how to do this?

Thanks,

Peter

[HemZone]

It’s very simple. You can check code through firebug OR inspect element.

Here is sample class which used in given link:

.yourclass h2 {
font-size: 50px;
color: white;
padding: 10px;
background: url(http://www.jackcolton.com/wp-content/themes/jack-colton/images/entry-h2-bg.png) center no-repeat;

Please make your own background image. I’ve just added from reference URL.

[pvijeh]

ahh, ok, so the background is actually an image. That is helpful. thanks a ton!

[Kitty Giraudel]

@ChrisP: sligthly buggy on Chrome 26 Mac OS X. Triangle is a little bit to big.

[CrocoDillon]

I guess setting height (line-height?) and border in ems would be the very least to make it more elegant/reusable :)

Off-topic (there should be more off-topic chit-chat on this forums): Almost didn’t recognize Hugo there! :P

[pvijeh]

this is phenomenal! Thanks Chris & Hemzone

[pvijeh]

I am a compete CSS newb, how can i implement this code on my site? I am running wordpress using the Canvas theme, if that helps.

[Author]

Posts