Binance is one of the leading cryptocurrency exchanges in the world. While I won't dive into explaining what crypto is all about in this article because it's not what you're here for, I will help you create a mental model for creating art with CSS.
One may ask "how is it possible to draw with CSS?". This article will help you understand how you can create art with CSS and in the end, you will create your first CSS art.
The process
First of all, we need to have a visual representation of what we are going to create. If you can't visualize the famous Binance logo in your head don't worry the image below will help.
The logo to an extent looks quite simple but things can get tough when you think of how to recreate it with CSS. If you struggle to come up with an idea of how you can recreate it with CSS don't worry I will guide you from start to finish.
Deconstructing the model
If you look at the logo, you will notice that it contains two boxes. The first is the big black box and the second is the yellow box at the center of the big black box.
The inner yellow box is rotated at 45° (45 degrees) with two smaller boxes with a thick black border intersecting near the center. This is it, this is a visual representation that will help you to recreate this logo with HTML and CSS.
The construction
From this point, we will get our hands dirty with some HTML and CSS code. The first thing we have to do is to create a blank canvas (I don't mean the native element) for ourselves on a blank HTML file.
<body>
<div class="canvas">
<div class="logo"></div>
</canvas>
</body>
The HTML code above is the skeleton of the CSS art we're about to create. Inside the body tag, the div element with a class of canvas will serve as the big black box, and the div element with the class of logo will serve as the smaller yellow box.
The styling
This is where the main work lies. By now, you must have seen a lot of developers on social media complain about how CSS is hard because they find it difficult to center a div on a page. Well, in the process of creating our CSS art, you will center a div or two.
The first part is to add our reset CSS styles(the reset styles help to ensure consistency of our work across different browsers)
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
The next step is to center our canvas on the screen.
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
The code above will center our canvas on the screen.
You still don't see any logo on your screen right? Just hold on, you will see something soon.
The next thing we have to do is to style our canvas. From the visual representation of our logo, the canvas is the big black box. So, let's go ahead and style the canvas.
.canvas {
--color: #f0b90b;
--backgorund-color: #000;
--scale: min(50vw, 160px);
width: var(--scale);
height: var(--scale);
background-color: var(--backgorund-color);
border-radius: 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 8px 24px 48px rgba(0, 0, 0, 0.24);
padding: 1rem 1rem;
color: var(--color);
}
From the styles of our canvas, you will notice we have some custom CSS properties. These custom properties will help us achieve a consistent theme and maintain the aspect ratio of our canvas across different screens (of course our logo needs to be responsive).
Now we have a canvas to draw on, let's go ahead and draw our logo to the screen. We just have to add the following styles for the logo.
.logo {
position: relative;
width: calc(var(--scale) / 2);
height: calc(var(--scale) / 2);
background-color: var(--color);
transform: rotate(45deg);
overflow: hidden;
}
From the code above, we are setting the width and height of the logo using custom properties that we defined in the styles of the canvas.
Child elements can inherit custom properties like other regular CSS properties from parents
CSS is so powerful that it provides a calc() function to perform math operations. We are using the calc() function in the code to create a box with a uniform aspect ratio (1:1).
At this point, you should have something that looks similar to the image below.
We are now faced with the problem of how we are going to style the two blocks that intersect near the center of the yellow box. You will notice that we have exhausted all the elements we defined in our HTML file and your question now is "What are we going to do now?". Don't worry, we have the ::before and ::after pseudo-elements at our disposal.
Accorsing to this article on the CSS tricks website
The
::beforeand::afterPseudo-elements in CSS allow you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is.
Let's grab the before and after pseudo-elements of the div with the class of logo and style them with the code below.
.logo::before,
.logo::after {
content: "";
position: absolute;
border: calc(var(--scale) / 16) solid var(--backgorund-color);
width: 100%;
height: 100%;
}
You will notice that we are still using the custom properties here and we gave them a position of absolute while the div with the class of logo (which is the direct parent) has a position of relative.
The issue now is that it seems like nothing changed on your screen and that is because the pseudo-elements have their height and width set to 100% (the same size as the parent element).
All we have to do now is to rotate the before and after pseudo-elements with the code below.
.logo::before {
transform: translate(-38%, -38%);
}
.logo::after {
transform: translate(20%, 20%);
}
Viola!, there you have it. A clean, sparkling, fresh Binance logo created with only HTML and CSS. You should have something similar to the image below.
Conclusion
You must be very excited if this is your first time creating art with CSS. Also, you will agree with me that although CSS can be tough sometimes, it is fun when you try to create art with it. if you're currently struggling to understand CSS, I'll tell you to practice it often, it gets easier with practice.
If you enjoyed this article go ahead and share it on Twitter and tag me @gzkdev
Thank you for sharing some of your time with me!
Top comments (0)