How to make vertical text with css

In this post we are going to discuss how we can use CSS to make Text Effects. We made a plain text based simple Logo for a page.

One of the best Syntax Highlighting NotePad to code CSS / HTML

Which special css code we used in this post ?

Special css code introducing in this post is writing-mode

Here is the code we used to make such text based logo using css.

<style>
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Josefin+Sans:wght@700&family=Teko:wght@500;700&display=swap');
.logo{
    margin:50px auto;
    width:400px;
    border:1px solid #000;
    border-bottom:5px solid #000;
    border-radius:4px;
    padding:40px;
    text-align:center;
    }
.first{
    font-size:50px;
    writing-mode: vertical-rl;
    position:relative;
    left:20px;
}
.mainlogo{
    font-size:78px;
    color:#c70c0c;
}
.last{
    font-size:30px;
    writing-mode: vertical-rl;
    position:relative;
    left:-18px;	
}

.fnt{font-family: 'Anton', sans-serif;}
.fnt1{font-family: 'Josefin Sans', sans-serif;}
.fnt2{font-family: 'Teko', sans-serif;}
</style>

In that logo ” The Brands Hub ” words ” The ” and ” Hub ” and vertically laid while ” Brands ” remain horizontal. To make such text effect there is special code in CSS which is ” writing-mode: vertical-rl “.

Rest all codes are position , position from left ,  font-size etc which we already discuss before in other tutorials.

Read CSS Tutorial : How to make text as background behind text.

* Internet explorer version 11 or lower will not support this writing-mode css.