Jmlpez

Posted on Jul 2, 2022

How create the Kotlin Logo with CSS3

#tutorial #css #webdev

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

Look what just happen 😯:

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