Building a simple banner heading effect using HTML and CSS

Add a bit of style to headings or other information with a pure HTML and CSS banner effect.

Let's look at how to create the effect used in this box. First we need some sample HTML to use in our examples:

<div class="page-body">
    <p>This is the story of...</p>
    <h3>The Grand Finale</h3>
    <p>...and then there were none.</p>
</div>

Add some basic CSS styles:

p {
    line-height: 1.5em;
    margin-top: 1.5em;
}
h3 {
    font-size: 1.17em;
    margin: 1em 0;
    color: #AAAAAA;
    font-style: italic;
}
.page-body {
    width: 80%;
    padding: 0 6px;
    margin: 1em 10%;
    background-color: white;
    -webkit-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.2);
       -moz-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.2);
        -ms-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.2);
}

This gives us:

This is the story of...

The Grand Finale

...and then there were none.

None of these styles are necessary for the effect. The main consideration is to make sure the container is offset from the lefthand side of the page or the part of the banner will be clipped.

Now let's start to create our banner by adding some styling to our heading.

First add a class to our h3:

<h3 class="banner-heading">The Grand Finale</h3>

and then give it some style:

.banner-body-x {
    /* Needed to allow the corner effect
     * to have position: absolute. */
    position: relative;
    /* This causes the heading to stick out
     * of the lefthand side of the container. */
    left: -21px;
    /* Not necessary, but the same value of
     * 21px keeps the text aligned inside the
     * container. */
    padding: 0.1em 21px;
    /* Not necessary, but stops the heading
     * from being flush at the top of the
     * container. */
    top: 0.5em;
    /* Not necessary, but helps with some
     * calculations. */
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
    /* choose your colour */
    background-color: pink;
}

Now we have:

This is the story of...

...and then there were none.

This is good. We have a bright heading to break up our text visually, but it’s still not really a banner. We still need to add the corner effect to add a bit of flourish.

Now, there are ways to do this with images or with extra divs, but we're going to use plain CSS:

.banner-body-x:before {
    /* Allows us to position precisely within 
     * the (relative) parent. */
    position: absolute;
    /* Position flush to the left and offset to
     * the bottom. */
    left: 0;
    /* .banner-body-x left (21px) - 
     * .page-body padding-left (6px) = 15px */
    bottom: -15px;
    /* Create a triangle in dark grey for the 
     * corner shadow. */
    border-top: 15px solid #444;
    border-left: 15px solid transparent;
    /* We hide the element itself, leaving its
     * border. */
    width: 0;
    height: 0;
    /* Needed to render pseudo elements. */
    content: "";
}

and we get:

This is the story of...

...and then there were none.

With all the magic aside, let's look at the trick.

This technique makes use of the CSS pseudo element :before. This allows us to in effect insert an element into our page. Through some clever styling we create a triangular shape using the border styles of our new element and through absolute positioning we can put it where we want it.

There is also the pseudo element :after which can be used in the same way. In these examples we could have used it with the same effect. In CSS3 these elements are now ::before and ::after.

Read more

Enhance the banner further:

Further information about this and the effects you can create with CSS pseudo elements can be found at:

Tags: