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 {
width: 1600px;
height: 840px;
background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);
color: white;
padding: 4rem;
font-family: Segoe UI;
display: flex;
align-items: center;
}
.text {
text-align: center;
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!
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;
}
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!
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!
