Cara mudah Membuat Tulisan Vertikal, Miring atau Terbalik di Blog

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.

Related Post

2 komentar