Halo teman-teman jumpa lagi pada tutorial dumet school, pada tutorial kali ini saya akan mencoba berbagi tutorial tentang Cara Membuat Text Vertikal Menggunakan CSS 3, seperti yang kita ketahui hampir semua text pasti horizontal, nah namun pada pada tutorial kali ini kita akan mencoba membuat text yang awalnya horizontal menjadi vertikal, untuk membuat text secara vertikal tidak lah sulit disini kita cukup memasukan sebuah property dan value pada css nya.
Oke teman-teman tanpa berlama-lama kita langsung saja masuk kestudy casenya tentang Cara Membuat Text Vertikal Menggunakan CSS 3, langkah pertama yang silahkan teman-teman buka text editornya dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cara Membuat Text Vertikal Menggunakan CSS 3</title>
<style type="text/css">
*{margin:0; padding:0;}
.container{margin:10px auto 0; width:200px; font-family:arial;}
.text1 {
writing-mode:tb-rl;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform:rotate(-90deg);
transform: rotate(180deg);
white-space:nowrap;
float:left;
}
.text2 {
writing-mode:tb-rl;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform:rotate(-90deg);
transform: rotate(-1deg);
white-space:nowrap;
float:right;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text1">Hello Dumet School</h1>
<h1 class="text2">Hello Dumet School</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>
Pada script index.html kita menggunakan sebuah tag style untuk menyisipkan CSS nya, dan pada CSS tersebut terdapat sebuah value rote, nah value rote itulah yang berfungsi untuk mengatur text yang kita gunakan menjadi vertikal.
Untuk menjalankan script tersebut teman-teman bisa menjalan kan nya pada browser maka akan terlihat hasilnya seperti dibawah ini
Jadi text yang awalnya horizontal bisa kita rubah menjadi vertikal text .
Nah bagai mana teman-teman cukup mudah bukan Cara Membuat Text Vertikal Menggunakan CSS 3 nya, sekian dulu tutorial saya kali ini tentang Cara Membuat Text Vertikal Menggunakan CSS 3,
Semoga bermanfaat
Terimakasih