Membuat dan menampilkan teks vertikal dengan CSS | Terkadang dalam desain kita perlu untuk menampilkan secara vertical / vertikal agar terlihat lebih menarik. Dahulu sangat sulit untuk membuat seperti itu pada halaman web, harus menggunakan gambar, sekarang dengan css yang semakin berkembang dan canggih kita bisa membuat teks vertikal dengan sangat mudah.
Pada tutorial kali ini Jurnalweb akan mencontohkan sedikit bagaimana cara membuat tulisan dengan orientasi vertikal hanya dengan CSS saja.
Pada contoh ini, kita akan menggunakan sebuah gambar dan diatasnya terdapat tulisan yang ditampilkan secara vertikal dengan bantuan CSS transform, dengan CSS transform kita bisa merotasi teks sesuai yang diinginkan.
– Baca juga: Cara Membuat Tabel Responsive Dengan CSS dan HTML
Markup HTML membuat teks vertikal
Kode HTML dibawah ini yang kita perlukan untuk membuat contoh teks vertikal, dimana pada HTML coba membuat sebuah div dengan class .demo-container
yang didalamnya terdapat div class .demo-image
untuk menampilkan background gambar, sedangkan teks ditampilkan pada class .demo-vertical-text
yang ada didalam class .demo-image
.
Membuat teks vertical dengan CSS transform
Untuk membuat teks menjadi vertikal kita membutuhkan bantuan CSS transform untuk melakukan rotasi (rotate) 90 derajat.
DEMO | DOWNLOAD
Jika tertarik Anda bisa melihat demo atau men-download kodenya disini.
mantap kalo diterapin di blog gan