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.

superman

Superman (Image: screenrant.com)

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.

<h1>Demo menampilkan teks secara vertikal dengan CSS <small>Lihat tutorialnya di <a href="http://www.jurnalweb.com/teks-vertikal-dengan-css">jurnalweb.com</a></small></h1>
<div class="demo-container">
	<div class="demo-image">
	<div class="demo-vertical-text">Superman Returns</div></div>
</div>

Membuat teks vertical dengan CSS transform

Untuk membuat teks menjadi vertikal kita membutuhkan bantuan CSS transform untuk melakukan rotasi (rotate) 90 derajat.

h1{
  font-size: 22px;
}
h1 small{
  display: block;
}
.demo-vertical-text {
    float: left;
    transform: rotate(90deg);
    transform-origin: left top 0;
    margin-left: 70px;
    padding: 10px;
    background-color: rgba(37, 34, 34, 0.3);
    opacity: 0.9;
    font-size: 1.8em;
    color: #FFF;
    text-transform: uppercase;
}
.demo-image{
    background:url("http://cp91279.biography.com/1000509261001/1000509261001_2008586720001_BIO-Barack-Obama-SF-FIX-Retry.jpg");
    width: 600px;
    height: 350px;
}

DEMO | DOWNLOAD

Jika tertarik Anda bisa melihat demo atau men-download kodenya disini.