Hi!, in a previous post I explain how to make a triangle in CSS3 , in this post I will show you how to create the Kotlin logo using that tecnique, gradients and a few CSS3 tricks.
This is the goal (there are another Kotlin logos but I choose this because is more interesting to explain):
Let's Create it!
First!
1- Prepare the environment
Create a folder and open it in your code editor
Create two files: index.html
, style.css
Now just type the basic HTML and open it in your browser
<!DOCTYPE html>
<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>Template Static Web App</title>
<link rel="stylesheet" href="./css/style. css" />
</head>
<body>
<section class="section">
<div class="logo-container">
<div class="logo-back">
<div class="logo"></div>
</div>
<strong class="logo-name">Kotlin</strong>
</div>
</section>
</body>
</html>
I have a section
to wrap all the content and the logo-container
wrap the logo and the logo-name
The logo is drawn in the logo-back
and the logo
classes
Basic Styles
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.section {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-color: white;
}
Next!
2- Create the Logo
WARNING: this is an aproximation of the original Logo because I couldn't get get the original values , however is quite similar :)
The background of the Kotlin logo is a linear-gradient
, but we are painting triangles (with the border-property
tecnique) so to achieve "gradient-borders" we paint a box (the logo-back
class) with a linear-gradient
(which is supported for the background
property).
The trick is that in the logo
class we set border: 100px solid transparent
. The border-width
is 100px - the half of the parent width/height - because the border is applied to all the sides so 100px in top, 100px in the bottom ... and the goal is to make it fit perfectly in the container so I set position: absolute
to remove it from the document flow and positioning the way I want.
The border-right-color
is equal to the background-color
of the section and with that trick I "remove" the triangle of the right and our logo start to take shape.
.logo-back {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #0096d6 20%, #7972e3 60%);
position: relative;
}
.logo {
position: absolute;
top: 0;
left: 0;
border: 100px solid transparent;
border-right-color: white;
}
.logo-name{
display:none;
}
Let's set display:none
to the logo-name
and look the result at this time:
Note:
if you are interested in learning more about "gradient-borders" check this post.
The final shape
It's turn of create and correct positioning the quadrilateral in the middle.
Let use the after
pseudo-element of the logo
class to achieve that:
.logo::after{
content: "";
position: absolute;
top: 0;
left: 0;
background: linear-gradient(0, #c856bd 0%, #f88a02 65%;
width: 75px;
height: 300px;
}
Why is positioning in the middle if I set top: 0
and left: 0
?
There is no problem at all, it's working in the exactly way is suppose to work (And fortunaly in the way we want 😁). That's because the position: absolute
property position the element respect to the closest parent with non-static position and the top
start exactly in the
padding not at the border, and the parent does not have any padding or content so is positioning where the padding should start, right in the middle!!.
Time to transform
Let use the transform
property to move the rectangle, but first let's think in a clever solution 🤔.
It's necessary rotate the rectangle but by default the tranform-origin
is set right in the middle of the box so if I set transform: rotate(45deg)
look what happen:
You could move it and try to correct positioning the shape but it's quite difficult to achieve that cleanly so let's think in other approach:
transform-origin: 0% 0%;
This means that all the transformations will be starting from (0, 0) or the top-left corner, look what happen now if I rotate the shape:
It's correctly rotated, it's time to translate it.
The shape needs to cover the upper triangle. if you look carefully I just have to move it all of it width
in the y-axis and the half of it heigth
in the x-axis.
transform: rotate(45deg) translate(-100%, -50%);
Convence yourself of those values (if you don't understand the minus in the translation, remove the rotation and you will notice)
Now it's just set overflow-hidden
to the logo-back
box to remove all the content out of it boundaries:
You can change the witdh of the shape and it will be exactly in the same place 😁
Styling the logo-name
Before all set display: flex
to the logo-container
.logo-container{
display: flex;
}
Then just basic styles for the logo-name:
.logo-name {
font-size: 290px;
display: block;
line-height: 200px;
margin-left: 32px;
color: #1e191a;
font-family: sans-serif;
}
The line-height
property have the same height
of the logo and the font-size
it is a little bigger so that it is exactly at the same height as the logo. if you want to know more about the line-height
property check this link
Note:
The font-family is sans-serif because the original font which is "JetBrains Sans" is property of the company and requires a license to use.
You can compare both logos and look some differences but I am satisfied and I really enjoyed doing it.
If you have any doubt, question or suggestion , please leave a comment. Thanks in advance!
Check and test the code here
Top comments (3)
Quite simple but very interesting 👊
🙌🙌😮😮😮 So nice!!
Thanks!