Text Effects with CSS

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.