Cara Membuat Efek Gradasi Teks dengan CSS3

Sekarang ini banyak sekalai tutorial yang bisa kita lihat dan bisa kita pelajari khusus nya cara membuat efek dan animasi pada tampilan web, dengan perkembangan teknologi pula kita bisa dengan mudah membuat sebuah efek dan animasi yang kita inginkan, sebagai contoh teknologi yang sekarang sangat banyak digunakan dalam mendesain tampilan web adalah CSS3, jQuery dan lain sebagainya. Dengan teknologi ini kita bisa membuat berbagai macam efek dan animasi yang sangat menarik. Sebagai contoh berikut ini adalah penerapan dari teknologi CSS3 tentang Cara Membuat Efek Gradasi Teks dengan CSS3. Simak langkah-langkanya berikut ini.

Tentu untuk membuat efek gradasi ini kita butuh objek yang akan dijadikan efek gradasi, dalam hal ini kita akan gunakan teks sebagai objeknya. Silahkan ketikan kode HTML5 berikut untuk objek teks nya.

<body>
	<div class="wrap">	
		<h1 class="teks">DUMETSCHOOL.</h1>
	</div>
</body>

Tentu kalian bisa membuat objek yang akan dijadikan gradasi dengan objek yang lain tidak hanya dengan menggunakan teks saja. Setelah kita tentukan objek yag akan dijadikan gradasi, barulah kita lanjutkan untuk desain tampilan gradasi warna pada objek dalam kasus ini yakni teks nya, berikut adalah kode CSS3 untuk membuat gradasi atau gradient warna pada teks.

@import url('https://fonts.googleapis.com/css?family=Days+One');
		h1 {
			font-family: 'Days One', sans-serif;
			font-size: 100px;
			font-weight: bold;
		}
		.wrap {
			width: 1000px;
			margin: auto;
		}
		.teks {
			position: relative;
			text-align: center;
			margin-top: 40%;
		}
		.teks:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
			background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
			background:    -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
			background:     -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
			background:      -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
			background:         linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
		}

Pada kode CSS3 diatas telah kita tentukan warna gradasi warna bagian sintak berikut.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
			background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
			background:    -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
			background:     -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
			background:      -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
			background:         linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)

Dan tentunya kalian bisa menyesuaikan warna gradasi warna sesuai keinginan, setelah semua kode diatas diketikan langkah terakhir adalah simpan file nya kemudian kalian bisa lihat dan buka pada browser masing-masing. Maka akan tampil desain teks dengan efek gradasi yang telah kita tentukan. Selesai

Baik, cukup sekian tutorial sederhana mengenai Cara Membuat Efek Gradasi Teks dengan CSS3. Semoga bermanfaat dan selamat mencoba 🙂

DEMO