DEV Community

Cover image for How create the Kotlin Logo with CSS3
Jmlpez
Jmlpez

Posted on

How create the Kotlin Logo with CSS3

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):

Kotlin Logo Original

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>
Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Let's set display:none to the logo-name and look the result at this time:

Kotlin logo

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;
}
Enter fullscreen mode Exit fullscreen mode

Look what just happen 😯:
Kotlin logo

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:
Kotlin logo

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%;
Enter fullscreen mode Exit fullscreen mode

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:

Kotlin logo

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%);
Enter fullscreen mode Exit fullscreen mode

Convence yourself of those values (if you don't understand the minus in the translation, remove the rotation and you will notice)

Kotlin logo

Now it's just set overflow-hidden to the logo-back box to remove all the content out of it boundaries:

Kotlin logo

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Check the final result:
Kotlin logo

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)

Collapse
 
thegitnoob profile image
Rafael Acosta

Quite simple but very interesting 👊

Collapse
 
sitonimbus profile image
Carlos Andrés Mora González

🙌🙌😮😮😮 So nice!!

Collapse
 
jmlpez profile image
Jmlpez

Thanks!