DEV Community: Jmlpez

How create the Kotlin Logo with CSS3

Jmlpez — Sat, 02 Jul 2022 14:36:29 +0000

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

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:

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

How make a Triangle in CSS3

Jmlpez — Fri, 24 Jun 2022 21:28:42 +0000

Hi! There are several ways to make a triangle in CSS3, in this post I will show one of them, using the border property

First!

1- Prepare the environment

You can use any text editor, however I recommend vscode :).

Now just create a folder and inside it two the index.html and the style.css

If you are using linux just type:

mkdir triangleExample
cd triangleExample
touch index.html style.css

Then open the folder in vscode typing:

code .

Next!

2- Create a simple static web page

Write the html content with a section tag and a div with the class triangle inside it:

<!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>Triangle Example</title>
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
        <section class="section">
            <div class="triangle"></div>
        </section>
    </body>
</html>

Write the basic style for the section tag:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.section {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Open the index.html file in your browser (I recommend Google Chrome :))

Finally!

3- Create a triangle

Once you get here is just type the triangle styles:

.triangle {
    width: 0;
    height: 0;
    display: inline-block;
    border: 50px solid transparent;
    border-top-color: crimson;
}

You sould see something like this in your browser:

How it works...?

The trick is that the triangle does not has width or height, and we set the border property to 50px (the size tha we want :))

Also the border-style is solid so is fully painted and the border-color is transparent so in that way, you will not see anything

But if we set border-top-color to crimson for example, then we will see just the to top of our element (because the others sides are transparent), which is in fact a triangle!

You can play around with those values and paint any of the sides, and even paint a rectangle triangle

To achieve this just paint the top and the left border in the triangle styles:

    border-top-color: crimson;
    border-left-color: crimson;

You should see something like this:

Usage Examples

There are many uses for a triangle in a web page

You can create a message box with an arrow like this:

To achieve this let's wrap our triangle in div tag with the class "message-box" and put a message inside it:

<div class="message-box">
    Message Box!
    <div class="triangle"></div>
</div>

Then modify the message-box element style:

.message-box {
    background-color: crimson;
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    border-radius: 6px;
}

And finally create and position the triangle correctly:

.message-box .triangle {
    display: inline-block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: crimson;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

We set position: absolute to the triangle, for correct positioning, because it must be right down the message box, and centered

For centered we set the left: 50% property to paint the element right after the middle (because the paint starts exactly in the middle) so is necessary move it the half of it's size and for that we use transform: translateX(-50%).

Concluying

Now you should know how to easy create triangles in CSS3

You can play around with those values and create the perfect triangle for your page!

DEV Community: Jmlpez

How create the Kotlin Logo with CSS3

Let's Create it!

First!

1- Prepare the environment

Now just type the basic HTML and open it in your browser

Basic Styles

Next!

2- Create the Logo

Note:

The final shape

Why is positioning in the middle if I set top: 0 and left: 0 ?

Time to transform

Styling the logo-name

Note:

How make a Triangle in CSS3

First!

1- Prepare the environment

Next!

2- Create a simple static web page

Finally!

3- Create a triangle

How it works...?

Usage Examples

Concluying

Why is positioning in the middle if I set `top: 0` and `left: 0` ?