Cara Membuat Vertikal Teks Dengan HTML CSS

Pada kesempatan ini saya akan membahas tentang Cara Membuat Vertikal Teks Dengan HTML CSS. Disini saya akan menggunakan salah satu property CSS writing-mode. Baiklah langsung saja kita membuatnya, yuk mari ikutin step-step berikut ini:

Sebelumnya buat terlebih dahulu struktur html, kemudian ketikan code dibawah ini:

<div class="container">
		<div class="box1">
		<h3>HTML & CSS</h3>
		<p>HTML Atau Hypertext Markup Language adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Sedangkan CSS atau Cascading Style Sheet adalah salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik. karna antara HTML Dan CSS sangat penting dan tidak bisa dipisahkan, maka belajar tentang HTML Dan CSS adalah sebuah tahapan penting yang harus dikuasi oleh junior web developer, dalam artikel ini anda akan belajar fudamental untuk menguasai HTML Dan CSS</p></div>
		<div class="box2">
		<h3>SASS & SCSS</h3>
		<p>SASS(Sassy Stylesheet) sendiri memberi kemudahan seperti tidak usah menulis kurung buka /tutup, dan juga tidak perlu menulis titik koma diakhir sintaks. Dengan menggunakan SASS sendiri memudahkan kita dalam menulis CSS seperti penggunaan variabel, nesting, mixins , selector inheritance dll. 
		SCSS merupakan sintaks yang paling umum digunakan yang merupakan superset dari CSS, yang berarti setiap sintak css yang berada di CSS3 bisa digunakan pada SCSS ini. Biasanya file SCSS menggunakan format ".scss".Sedangkan SASS sintaks yang lebih dulu muncul dari SCSS yang dikenal sebagai idented syntax yang biasa mengguanakn format .sass. Dan memang ditujukan untuk pengguna yang memilih kemudahan dalam menulis CSS.</p>
		</div>
	</div>

Oke selanjutnya kita berikan style CSS seperti code dibawah ini

body{margin:0;padding:0;}
.container{
	position: absolute;
	width: 50%;
	transform: translate(0,-50%);
	top:40%;
	left: 20%;
}
.box1 h3{
	writing-mode: vertical-lr;
	display: inline;
	background-color: #f00;
	color: #ffffff;
	padding: 15px;
	margin-left: 0;
	word-spacing: 2px;
	letter-spacing: 1.2px;
	transform: rotate(180deg);
	border-radius: 25px;
}
.box1 p{
	display: inline;
	position: absolute;
	top:0;
	margin:0;
	text-align: justify;
	letter-spacing: 1px;
	line-height: 20px;
	padding: 12px 0;
}
.box2 h3{
	writing-mode: vertical-rl;
	display: inline;
	background-color: #8942a8;
	color: #ffffff;
	padding: 15px;
	margin-right: 0;
	word-spacing: 2px;
	letter-spacing: 1.2px;
	transform: rotate(0deg);
	float: right;
	border-radius: 25px;
}
.box2 p{
	display: inline;
	position: absolute;
	bottom: 0;
	margin:0;
	text-align: justify;
	letter-spacing: 1px;
	line-height: 20px;
	padding: 12px 0;
	width: 93%;
}

Jika sudah silahkan simpan kedua file diatas, kemudian buka pada browser-browser masing-masing.

Demikian dalam pembahasan artikel kali ini, semoga bermanfaat dan sampai jumpa dalam kesempatan lainnya.

terima kasih.

Cara Membuat Vertikal Teks Dengan HTML CSS

Kategori