Cara mudah Membuat Tulisan Vertikal, Miring atau Terbalik di Blog

Cara mudah Membuat Tulisan Vertikal, Miring atau Terbalik di Blog
Hi Web Developer! kali ini guru design akan berbagi tutorial cara mudah membuat tulisan vertikal, miring atau terbalik di blog atau website,kalian pasti pernahkan melihat blog teman anda tulisannya unik ada yang miring ada yang terbalik dll, baiklah tanpa basa basi ikuti tutorialnya.

 Demo nya, Cara mudah Membuat Tulisan Vertikal, Miring atau Terbalik di Blog.
Caranya sangat mudah, karena disini  saya hanya menggunakan satu fungsi saja, yakni menggunakan kode css3 transform rotate, tinggal sudut kemiringannya diubah beberapa derajat dengan cara menggati rotate-nya saja. Mudahkan  jika ingin mencoba membuat seperti di atas, silahkan copy kode css3 dibawah ini.

Caranya anda buat selector id contoh:

<div id="terbalik">Ini tulisan terbalik</div>

Kemudian tambahkan style berikut:
#terbalik {transform: rotate(180deg);
webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);/*untuk firefox*/
-o-transform: rotate(180deg);
}

Untuk membuat tulisan vertikal caranya anda buat selector id contoh:

<div id="vertikal">Ini tulisan vertikal</div>

Kemudian tambahkan style berikut:
#vertikal {transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}

Untuk merubah tulisan secara vertical tinggal merubah angka yang berwarna hijau menjadi -90 atau 90.

Atau jika anda ingin langsung membuatnya tanpa harus membuat selector id, caranya bisa dengan kode seperti ini.
<span sytle=transform: rotate(0.5deg);
-webkit-transform: rotate(0.5deg);
-moz-transform: rotate(0.5deg);
-o-transform: rotate(0.5deg);>NAH SEPERTI INI NANTINYA..!!!</span>

Kode diatas adalah contoh tulisan miring, jika kamu ingin menggunakannya dengan selector id caranya anda buat selector id seperti berikut:

<div id="miring">Ini tulisan miring</div>

Kemudian tambahkan style berikut:

#miring{transform: rotate(0.5deg);
-webkit-transform: rotate(0.5deg);
-moz-transform: rotate(0.5deg);
-o-transform: rotate(0.5deg);;
}
 
Terimakasih semoga bermanfaat.

About the Author

Seorang yang hobi nulis dan hobi berbagi kebaikan❣️

2 komentar

  1. Wihh cocok nih tutor.buat isengin template temen :v

    Request tutor bikin teks acak dong hu biar lebih perfect jahilinnya :v
    1. Maksudnya text acak gimana ya?
Cookie Consent
Kami menggunakan cookies di situs ini untuk menganalisis lalu lintas, mengingat preferensi Anda, dan mengoptimalkan pengalaman Anda.
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Harap sambungkan ke internet dan mulai menjelajah lagi.
AdBlock Detected!
Kami telah mendeteksi bahwa Anda menggunakan plugin pemblokir iklan di browser Anda.
Pendapatan yang kami peroleh dari iklan digunakan untuk mengelola situs web ini, kami meminta Anda untuk memasukkan situs web kami ke dalam daftar putih pada plugin pemblokir iklan Anda..
Site is Blocked
Sorry! This site is not available in your country.