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.

20 Maret 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat