Home

Cara membuat gaya teks vertical

toat sarang
toat sarang

hai hai..


Kalo biasanya kita menulis sebuah artikel bersifat hosizontal membentang ke sisi kanan, Apakah kalian pernah tidak sengaja melihat sebuah artikel yang terdapat tulisan vertical di sebelah sisi kiri seperti contoh gambar di bawah ini .


Kita jarang sekali menjumpai hal seperti itu di blog atau situs web lain bukan tidak pernah tapi jarang karna biasanya saya menjumpai Nya di sebuah majalah itu di namakan writing mode atau gaya mode penulisan


Sebagai Demo
Kali ini saya akan mencoba untuk membuat tulisan tersebut menggunakan css, Sebagai acuan saya menggunakan string h3 karna Di blog saya h3 h4 h5 nganggur maka saya akan memanfaatkan Nya Kalian ikuti caranya

Pertama kalian msuk di mode edit HTML pada template blog kalian lalu masukan css di bawah ini tepat di atas ]]></b:skin>

Jika kalian menggunakan template versi AMP kalian tempelkan css di bawah tepat di atas code
/*]]>*/
</style>
h3 {
font-family: 'Righteous', sans-serif;
  font-size: 1.6em;
  line-height: 1;
  writing-mode: vertical-lr;
  float: left;
  margin: 0 0 0 -1%;
  padding: .2em .5em .5em .1em;
  max-height: 500px;
}

@media all and (min-width: 40rem) {
  h3 {
font-family: 'Righteous', sans-serif;
    font-size: 2.1em;
    margin-left: 1.10rem;
  }
}

Setelah menerapkan css di atas kalian bisa membloknya dengan cara seperti ini <h3> Teks kalian..</h3>

Untuk keberhasilan cara di atas mengacu pada code writing-mode: vertical-lr;

Semoga bermanfaat terimakasih sudah membaca Cara membuat gaya teks vertical

Baca juga