Cara Membuat Text Vertikal Menggunakan CSS 3
Halo teman-teman jumpa lagi di panduan Source Code Aplikasi, di panduan kali ini saya akan mencoba berbagi panduan mengenai Cara Merancang Text Vertikal Menggunakan CSS 3, seperti yang kita ketahui hampir seluruh text pasti horizontal, nah namun di di panduan kali ini kita akan mencoba merancang text yang awalnya horizontal menjadi vertikal, bagi merancang text secara vertikal tak lah sulit disini kita lumayan memasukan sebuah property dan value di css nya.
Oke teman-teman tanpa berlama-lama kita seketika saja masuk kestudy casenya mengenai Cara Merancang Text Vertikal Menggunakan CSS 3, langkah pertama-tama 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 Merancang 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 Source Code Aplikasi</h1>
<h1 class=text2>Hello Source Code Aplikasi</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>
Di script index.html kita menggunakan sebuah tag style bagi menyisipkan CSS nya, dan di CSS tersebut terdapat sebuah value rote, nah value rote demikianlah yang berfungsi bagi mengatur text yang kita gunakan menjadi vertikal.
Bagi menjalankan script tersebut teman-teman dapat menjalan kan nya di browser karenanya akan terlihat hasilnya seperti dibawah ini
Jadi text yang awalnya horizontal dapat kita rubah menjadi vertikal text .
Nah bagai mana teman-teman lumayan gampang bukan Cara Merancang Text Vertikal Menggunakan CSS 3 nya, sekianlah dulu panduan saya kali ini mengenai Cara Merancang Text Vertikal Menggunakan CSS 3,
Semoga bermanfaat
Terimakasih
Sumber https://kursuswebsite.org
