Grow your CSS skills. Land your dream job.

How to Create Custom H2 tags like this site

  • # April 11, 2013 at 1:56 am

    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

    # April 11, 2013 at 2:19 am

    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.

    # April 11, 2013 at 2:26 am

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

    # April 11, 2013 at 9:12 am

    @pvijeh, it doesn’t have to be an image, here’s with a pseudo-element

    http://codepen.io/ChrisPlz/pen/tIzAG

    # April 11, 2013 at 2:28 pm

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

    # April 11, 2013 at 3:06 pm

    @HugoGiraudel, I had a feeling it might be buggy because of font rendering. Fixed now, just had to give `h1` a height.

    Probably isn’t the most elegant solution, but it addresses the oversized triangle.

    # April 11, 2013 at 5:05 pm

    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

    # April 11, 2013 at 5:40 pm

    this is phenomenal! Thanks Chris & Hemzone

    # April 11, 2013 at 5:42 pm

    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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".