Skip to content
Guide Blog

Guide Blog

A Blog which Guides How to do

Primary Menu Guide Blog

Guide Blog

  • Home
  • About Us
  • Terms and conditions
  • Privacy Policy
  • CSS Tutorials

Text Effects with CSS

Reviewer March 26, 2023 0
css text effects

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.

text based logo using css

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.

 

Post Views: 404
Tags: how to make text logo using css, how to make vertical text in css, how to use css for vertical text, how to write vertical text css, text based css logo, vertical text css, writing-mode css

Continue Reading

Previous How to make text as background behind text
Next Understand Basic of CSS Animations

More Stories

  • CSS Tutorials

Image Overlapping with CSS How to do

Reviewer July 10, 2023 1
css image as border
  • CSS Tutorials

Image border using CSS

Reviewer July 4, 2023 0
diagonal badge css tutorial
  • CSS Tutorials

Diagonal Badge – Diagonal Ribbon with CSS HTML

Reviewer June 23, 2023 0

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  −  5  =  2

Latest Post

  • Coding Chessboard using for loop without Modulus in PHP
  • Useful Commands for Windows
  • Image Overlapping with CSS How to do
  • How to make chessboard layers using PHP
  • Image border using CSS
  • Without using Modulus Find Even and Odd in PHP for loop
  • Diagonal Badge – Diagonal Ribbon with CSS HTML
  • Unzip file with php code
  • Border Animation with the help of CSS3
  • CSS Tutorial : Moving an image behind text
  • Short forms used on Social Media
  • Free hack to improve mobile signals
  • How to use Mix-blend mode in CSS
  • How Json file works with PHP ( Encode & Decode Json with PHP )
  • Multiple shadow text in css

Categories

  • Crypto Currencies (1)
  • CSS Tutorials (14)
  • Knowledge Bank (9)
  • MySQL Tutorials (2)
  • PHP Tutorials (12)
  • Tutorials (12)
  • Website Reviews (4)

About This Site

This is a blog where different types of guidance are posted in the name of Tutorials and Reviews.

You may have missed

PHP chessboard for loop without modulus
  • PHP Tutorials

Coding Chessboard using for loop without Modulus in PHP

Reviewer August 30, 2023 0
useful windows commands
  • Knowledge Bank

Useful Commands for Windows

Reviewer July 26, 2023 1
  • CSS Tutorials

Image Overlapping with CSS How to do

Reviewer July 10, 2023 1
  • PHP Tutorials

How to make chessboard layers using PHP

Reviewer July 10, 2023 2
css image as border
  • CSS Tutorials

Image border using CSS

Reviewer July 4, 2023 0
GuideBlog - 2023