The Frontier

Create Beautiful Banners and Other Graphics Easily Using HTML and CSS

Create Beautiful Banners and Other Graphics Easily Using HTML and CSS

If you are a web developer, chrome is all you need to create great graphics for your content

Sam Phillips's photo
Sam Phillips
·

3 min read

Featured on Hashnode

Table of contents

Introduction

If you are like me, you like to create graphics using the tools you already know. If I need a banner or graphic for something, I don't want to spend 2 weeks learning Photoshop, Canva, or some other graphic design tool to create a single, simple image for a specific purpose.

Here is a simple way to create any image or graphic you need using the tools you already know, HTML and CSS. I made the banner for this blog post using this very method! And I will use it as an example in this article.

Create an Empty HTML Document

First create a HTML document, doesn't need anything other than enough to open it in chrome and see its content.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>

    </body>
</html>

You don't need the meta tags, they just get generated when using the VS Code doc snippet.

Create a Banner

Next let's create a div with a class to set things up along with some CSS styles for what we need, a cover image for a hashnode blog post is 1600x840 so that's what we will specify for its width and height.

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
            .banner {
                /* Desired width */
                width: 1600px;

                /* Desired height */
                height: 840px;

                /* A nice looking gradient at a 45deg angle because i'm edgy */
                background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);

                /* White text seems appropriate */
                color: white;

                /* Some padding to help text wrap nicely */
                padding: 4rem;

                /* Chrome supports Segoe UI out of the box and it's usually good enough for banners */
                /* Easy to import a custom font though! */
                font-family: Segoe UI;

                /* And finally just use flex-box to center the text vertically */
                display: flex;
                align-items: center;
            }

            .text {
                /* Center the text horizonally too */
                text-align: center;

                /* Font size set to whatever looks best */
                font-size: 80px;
            }
        </style>
    </head>
    <body>
        <div  class="banner">
            <div class="text">Create Beautiful Banners and Other Graphics Easily Using HTML and CSS</div>
        </div>
    </body>
</html>

And here we have it! banner2.png

You can do so much with so little, here it is with an image and text stroke:

.banner {
    background: url(./background.jpg);
    background-size: cover;
}

.text {
    font-weight: 500;
    -webkit-text-stroke: 1px black;
}

banner2-1.png

You get the point, you can get as fancy as you like, with minimal effort using HTML and CSS, and you aren't constrained by any tooling, pay walls, or forced sign ups.

Save it as an Image!

Chrome makes it SUPER easy to create an image from what you've made. Once you are happy with your design, you can right-click and inspect the div element to find it in the Chrome Dev Tools Inspector. Chrome gives you an option if you right click the div in the inspector to Capture node screenshot. This saves the div as it's rendered as a PNG image. Done!

save.gif

Examples

I created a second article dipping into this further, showing some more cool tricks you can use to create some really beautiful banners!

Create Beautiful Banners and Other Graphics Easily Using HTML and CSS - Examples

Conclusion

Use the tools you already know and a little trick in chrome to make your life easier 👍

I hope this helps you save time creating graphics to add a little flare to the content you create.

Follow me on Twitter to keep up to date with my projects and get notified of new articles like this in the future!

HTMLCSSHTML5CSS3Google Chrome