Membuat Text Secara Vertical Menggunakan CSS

Membuat Text Secara Vertical Menggunakan CSS yaitu text yang tersusun dengan posisi lurus dari atas ke bawah menggunakan css. Cara membuat posisi vertical atau  horizontal pada suatu objek kita bisa atur dengan menggunakan property transform pada css.

Pada artikel kali ini saya akan Membuat Text Secara Vertical Menggunakan CSS dan berikut ini adalah struktur htmlnya.

<!DOCTYPE html> 

 <html> 

      <head> 

          <title>Membuat Text Secara Vertical Menggunakan CSS</title> 

          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

      </head> 

      <body>   

           <div class="container"> 

              <h1>Membuat Text Secara Vertical Menggunakan CSS</h1><br />                

              <div id="back_image"> 

                   <div id="vertical-text">Danau Toba</div> 

              </div> 

           </div> 

      </body> 

 </html>

Oke jika sudah maka kita akan membuat style css di dalam tag head seperti script di bawah ini.

      <style> 

      #back_image { 

           background:url("https://i1.wp.com/blog.tiket.com/wp-content/uploads/Gambar-Pemandangan-Alam-Terindah-Danau-Toba.jpg?resize=600%2C314&ssl=1") no-repeat; 

           width:603px; 

           height:317px; 

      } 

      #vertical-text { 

           float:left; 

           transform:rotate(90deg); 

           transform-origin:left top 0; 

           margin-left:80px; 

           padding:10px; 

           background-color:rgba(37, 34, 34, 0.3);  

           text-transform:uppercase; 

           color:#fff; 

           font-size: 20px;

      } 

      </style> 

Jika teman-teman buka hasilnya di browser maka tampilannya akan seperti pada gambar di bawah. Dimana tampilan text yang ada di dalam div id dengan nama vertical-text posisinya menjadi vertical dengan cara memberikan property transform:rotate(90deg) yang berfungsi memutar suatu objek sebesar 90deg atau 90 derajat.

Untuk nilai rotatenya teman-teman bisa atur dengan bebas seperti contoh pada gambar di bawah ini.

Demikian artikel tentang cara Membuat Text Secara Vertical Menggunakan CSS. Semoga dapat bermanfaat dan selamat mencoba.