إنضم لنا

Cara membuat gaya teks vertical





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
Penulis:

Seorang Penulis Asal Tegal jawa tengah 


PENTING !!!
Untuk pertanyaan di luar topik silahkan Gunakan Komentar Facebook atau Google+ sengaja Kami sediakan Untuk komentar random Dan untuk pertanyaan seputar article gunakan komentar disqus Terimakasih...

Disqus

Disqus comments:


Google+

Google+ comments:

Facebook

Facebook comments:

This site uses cookies from Google to deliver its services, to personalise ads and to analyse traffic. Information about your use of this site is shared with Google. By using this site, you agree to its use of cookies. Detail