Cara Membuat Text Judul Keren dengan CSS

Hallo teman-teman, Bertemu kembali dengan saya dan masih diwebsite ini. Seperti biasa ya teman-teman, semoga masih diberikan kesehatan dan kebahagiaan agar dapat kembali semangat dalam mencari informasi atau ingin mengupgrade skill didunia website terutama dalam hal desain website.

Pada kesempatan kali ini saya akan memberikan tutorial dan tips tentang Cara Membuat Text Judul Keren dengan CSS. pada pembahasan kali ini saya menganjurkan untuk teman-teman harus sudah mengenal lebih dahulu tentang css beserta property-propertynya agar tulisan saya ini dapat dengan mudah dimengerti dan dipahami oleh teman-teman.

Oke disini kita akan mulai untuk Cara Membuat Text Judul Keren dengan CSS, pertama-tama teman-teman jalankan/run text-editor yang teman-teman gunakan, kemudian ketiklah/copy script HTML dibawah ini :

<div class="container">
		<h1>DUMETSCHOOL</h1>
	</div>
		<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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

Jika sudah, langkah selanjutnya teman-teman ketik/copy script CSS seperti dibawah ini :

     <style>    
         *{margin: 0; padding: 0}

		.container {
 		 border-bottom: 100px solid #333;
 		 border-top: 100px solid #eee;
 		 display: -webkit-box;
 		 display: -ms-flexbox;
 		 display: flex;
 		 height: 0;
		}

		h1 {
		  border: 10px solid #fff;
		  color: #fff;
		  font-size: 100px;
		  margin: auto;
		  mix-blend-mode: difference;
		  padding: 0 50px;
		  text-transform: uppercase;
		  -webkit-transform: translate(0, -50%);
		          transform: translate(0, -50%);
		  -webkit-transition: box-shadow 0.4s;
		  transition: box-shadow 0.4s;
		}
		h1:hover {
		  box-shadow: 0 0 0 30px #555;
		}
		p {width: 900px; margin: auto;}

	</style>

Dan untuk penggabungan kedua script diatas, maka hasilnya akan terlihat seperti pada dibawah ini :

<html>
<head>
	<meta charset="UTF-8">
	<title>TEXT JUDUL</title>
	<style>
	*{margin: 0; padding: 0}

		.container {
 		 border-bottom: 100px solid #333;
 		 border-top: 100px solid #eee;
 		 display: -webkit-box;
 		 display: -ms-flexbox;
 		 display: flex;
 		 height: 0;
		}

		h1 {
		  border: 10px solid #fff;
		  color: #fff;
		  font-size: 100px;
		  margin: auto;
		  mix-blend-mode: difference;
		  padding: 0 50px;
		  text-transform: uppercase;
		  -webkit-transform: translate(0, -50%);
		          transform: translate(0, -50%);
		  -webkit-transition: box-shadow 0.4s;
		  transition: box-shadow 0.4s;
		}
		h1:hover {
		  box-shadow: 0 0 0 30px #555;
		}
		p {width: 900px; margin: auto;}

	</style>
</head>
<body>
	<div class="container">
		<h1>DUMETSCHOOL</h1>
	</div>
		<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. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>

Jika sudah sama seperti diatas, maka teman-teman tinggal simpan lalu jalankan/run dibrowser yang teman-teman gunakan. Jika benar maka hasilnya akan terlihat sama seperti pada gambar dibawah ini :

Bagaimana teman-teman ? cukup mudah bukan ? jadi diatas adalah contoh sederhananya dalam membuat text judul keren dan disana saya menggabungkan antara property border dengan blend-mode maka hasilnya cukup menarik seperti pada gambar diatas hehe. Dan untuk pengembangannya silahkan teman-teman coba modifikasi sendiri dengan acuan diatas sesuai selera teman-teman.

Oke kalau begitu cukup sekian pembahasan kali ini tentang Cara Membuat Text Judul Keren dengan CSS semoga bermanfaat buat teman-teman dan sampai bertemu dipembahasan selanjutnya.

Terimakasih