Cara Membuat Efek Gradient Pada Text

Pada kesempatan kali saya akan membagikan tutorial tentang cara membuat efek gradient pada text, efek gradient disini diberikan pada sebuah teks agar terlihat berbeda dan menarik dari segi tampilannya.

Baiklah coba ikutin bagaimana cara membuatnya langkah – langkahnya:

Langkah pertama buat file HTML seperti berikut ini:

<!DOCTYPE html>
<html>
<head>
	<title>Membuat gradient pada text</title>
</head>
<body>
<h1 class="kata">
	<span> Terbaik Dan No.1</span>
</h1>
</body>
</html>

Langkah selanjutnya tambahkan style CSS supaya lebih terlihat hasilnya sebagai berikut:

<style type="text/css">
		body{
			background: #272727;
		}
		h1{
			font-family: "Arial", sans-serif;
			font-size: 85px;
			text-align: center;
			font-weight: bold;
			color:#3d3d3d;
			margin-top:200px;
		}
		.kata{
			position: relative;			
		}
		.kata:after{
			content: '';
			position: absolute;
			display: block;
			top:0;
			left: 0;
			height: 100%;
			width: 100%;
			background: linear-gradient(to bottom, rgba(39,39,39,1) 0%, rgba(39,39,39,0) 100%);
			background: -moz-linear-gradient(top,rgba(39,39,39,1) 0%, rgba(39,39,39,0)100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(39,39,39,1),color-stop(100%,rgba(39,39,39,0)));
			background: -webkit-linear-gradient(top, rgba(39,39,39,1) 0%, rgba(39,39,39,0)100%);
			background: -o-linear-gradient(top, rgba(39,39,39,1) 0%, rgba(39,39,39,0)100%);
			background: -o-linear-gradient(top, rgba(39,39,39,1) 0%, rgba(39,39,39,0)100%);

			filter:
			prodig:DXImageTransform.Microsoft(startColorstr='#272727', endColorstr='#272727', GradientType=0);
		}
		span{
			text-shadow: 
						0 -1px 0 #858585,
						0 1px 10px rgba(0,0,0,.6),
						0 6px 1px rgba(0,0,0,.1),
						0 0px 5px rgba(0,0,0,.2),
						0 1px 3px rgba(0,0,0,.3),
						0 3px 5px rgba(0,0,0,.2),
						0 7px 10px rgba(0,0,0,.25),
						0 15px 10px rgba(0,0,0,.2),
						0 25px 15px rgba(0,0,0,.2),
		}

	</style>

Jika sudah simpan kedua file tersebut ,lalu coba jalankan di browser masing-masing , jika benar maka tampilannya akan seperti berikut ini:

Demikian pembahasan artikel kali ini tentang cara membuat gradient pada text, semoga bermanfaat dan sampai jumpa pada kesempatan lainnya tentang materi yang berbeda. terima kasih

Kategori