Membuat Gradasi Warna Font di CSS
Halo teman teman dumenity, jumpa lagi di panduan panduan bermanfaat seputar web design dan web programming, oh iya teman teman mungkin pernah melihat warna gradasi bukan, nah kali ini kita akan belajar merancang Gradasi Warna Font dengan CSS, yuk mari kita praktek kan yah teman teman.
Sebelumnya seperti lazim teman teman buka text editor kesayangan teman teman dan bikin 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> Membangun Gradasi Warna Font di CSS </title>
<link rel =stylesheet href =style.css>
</head>
<body>
<div class =row>
<h2> Source Code Aplikasi </h2>
<h2> Web Development </h2>
</div>
</body>
</html>
setelah itu teman teman bikin file css dan beri nama dengan nama style.css. Setelah itu kita ke google font bagi mencari font yang menarik dan cari font yang bernama ‘Gugi’. copy kan kode css nya lihat contoh berikut di gambar.
di pada css kode nya seperti berikut, jangan salah ketik yah teman teman. karena dapat 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 gampang dan menarik bukan, teman teman dapat memakai nya di pada penyusunan program web design teman teman yah..
sekianlah panduan Membangun Gradasi Warna Font di CSS semoga bermanfaat yah teman teman.
Sumber https://kursuswebsite.org
