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.

Artikel Lain:

crop imageCara Crop Gambar dengan CSS sliding menu css htmlTutorial Cara Membuat Sliding Menu dengan CSS dan HTML animasi mengetik teks cssCara Membuat Animasi Efek Mengetik Teks dengan CSS tanpa Javascript video ditengah layar dengan cssVideo Responsive Ditengah Frame Layar Monitor dengan CSS multilevel dropdown menu cssCara Membuat Multilevel Dropdown Menu dengan CSS Evento14 Template Bootstrap Gratis untuk Membuat Website Keren Müller16 Contoh Website Keren Menggunakan Efek Warna Duotone Animasi SVG taman bermain21 Contoh Animasi SVG Keren dan Interaktif + Scriptnya Superfluent Design13 Contoh Halaman About yang Keren dan Menginspirasi PSD to HTML CSS16 Video Tutorial Konversi PSD ke HTML dan CSS pupup css javascriptTutorial Cara Membuat Popup dengan CSS dan Javascript convert psd to html10 Tutorial Cara Slicing PSD ke HTML dan CSS