Membuat Gradasi Warna Font di CSS

Halo teman teman dumenity, jumpa lagi di tutorial tutorial bermanfaat seputar web design dan web programming, oh iya teman teman mungkin pernah melihat warna gradasi bukan, nah kali ini kita akan belajar membuat Gradasi Warna Font dengan CSS, yuk mari kita praktek kan yah teman teman.

Sebelumnya seperti biasa teman teman buka text editor kesayangan teman teman dan buat file index. html dan ketikan struktur HTML seperti berikut dan save atau simpan dengan nama index.html atau berextendsi .html.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset ="UTF-8">
	<title> Membuat Gradasi Warna Font di CSS </title>
	<link rel ="stylesheet" href ="style.css">
</head>
<body>
	<div class ="row">
		<h2> Dumet School </h2>
		<h2> Web Development </h2>
	</div>
</body>
</html>

setelah itu teman teman buat file css dan beri nama dengan nama style.css. Setelah itu kita ke google font untuk mencari font yang menarik dan cari font yang bernama ‘Gugi’. copy kan kode css nya lihat contoh berikut di gambar.

di dalam css kode nya seperti berikut, jangan salah ketik yah teman teman. karena bisa gak jalan kode css nya entar.

@import url( 'https://fonts.googleapis.com/css?family=Gugi' );
*{
	padding: 0;
	margin: 0;
}
body{
	background: #123;
}
.row{
	margin-top: 30%;
}
h2{
	text-align: center;
	font-family: 'Gugi', cursive;
	font-size: 5em;
	background: -webkit-linear-gradient(to right, rgb(60, 181, 181), rgb(229, 59, 81));
	background: linear-gradient(to right, rgb(60, 181, 181), rgb(229, 59, 81));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	
}

Hasil dari kode di atas seperti gambar di bawah ini yah teman teman.

nah mudah dan menarik bukan, teman teman bisa menerapkan nya di dalam pembuatan aplikasi web design teman teman yah..

sekian tutorial Membuat Gradasi Warna Font di CSS semoga bermanfaat yah teman teman.

Kategori