Membuat rotasi teks dengan css
Berikut ini kita akan membahas cara membuat rotasi teks dengan kode yang sesingkat mungkin.
Beberapa pengguna web juga membutuhkan cara ini, termasuk jika website mereka ingin dimodifikasi teks dengan gaya horizontal.
Kode yang kita gunakan dibawah ini merupakan code css yang nantinya kita pakai dengan menggunakan class rotasi-teks dan anda dapat meletakkan kodenya setelahatau sebelum.
Namun ukuran dari width dan height pada css dibawah ini tidak kita batasi/ automatis.
Anda cukup menambahi kode lebar dan panjangnya sesuai dengan kebutuhan anda.
jadi untuk mengubah arah rotasinya, anda cukup mengubah
Contoh angka 60 = 60 derajat, angka 90 = 90 derajat.
Paham kan??
Sedangkan untuk kode
Jika anda tidak membutuhkan itu, anda cukup menggunakan kode sederhana saja yaitu
Cara penerapannya adalah dengan cara menyalin semua kode pertama paling atas,
Simpan kedalam html anda didalam kode header web.
Kemudian letakkan didalam kode yang anda ingin buat vertikal. contoh:
Intinya adalah: anda bisa meletakkan kode teks-vertikal didalam kode yang menggunakan class diwebsite anda.
Oke, sekian dulu tutorial hari ini dan selamat berkunjung.
Beberapa pengguna web juga membutuhkan cara ini, termasuk jika website mereka ingin dimodifikasi teks dengan gaya horizontal.
Kode yang kita gunakan dibawah ini merupakan code css yang nantinya kita pakai dengan menggunakan class rotasi-teks dan anda dapat meletakkan kodenya setelahatau sebelum.
Namun ukuran dari width dan height pada css dibawah ini tidak kita batasi/ automatis.
Anda cukup menambahi kode lebar dan panjangnya sesuai dengan kebutuhan anda.
Contoh dari hasil code diatas adalah seperti gambar dibawah ini:<style type="text/css">.teks-vertikal { transform: rotate(90deg); transform-origin: left top 0; }</style>
jadi untuk mengubah arah rotasinya, anda cukup mengubah
transform: rotate(90deg);
dimana angka pada 90 diatas bisa diganti berdasarkan derajat putaran yang anda inginkan.Contoh angka 60 = 60 derajat, angka 90 = 90 derajat.
Paham kan??
Sedangkan untuk kode
transform-origin: left top 0;Yaitu kode yang menetukan tata letaknya. Diatas ini adalah kode yang menggunakan posisi berada pada kiri atas dengan jarak nol ( 0 ) dari atas/ top.
Jika anda tidak membutuhkan itu, anda cukup menggunakan kode sederhana saja yaitu
transform: rotate(90deg);
Terus, bagaimana menerapkannya ke dalam web?
Cara penerapannya adalah dengan cara menyalin semua kode pertama paling atas,
Simpan kedalam html anda didalam kode header web.
Kemudian letakkan didalam kode yang anda ingin buat vertikal. contoh:
<a href=”Url%20tujuan” class=”teks-vertikal”>Teks anda disini</a>
Oke, sekian dulu tutorial hari ini dan selamat berkunjung.
Posting Komentar untuk "Membuat rotasi teks dengan css"
Berkomentar dengan sopan, dan Dilarang menanamkan Link pada komentar