Membuat Teks dengan Warna Gradien Menggunakan HTML dan CSS
Membuat Teks dengan Warna Gradien Menggunakan HTML dan CSS – Pada artikel kali ini kita akan membuat teks dengan warna gradien menggunakan HTML dan CSS. Tips yang kali ini dibagikan merupakan sangat popular karena menggunakan gradien sehingga dapat membuat suatu desain yang indah didalam website. Disini kita akan menggunakan sesuatu yang lebih sederhana menggunakan linear gradient pada sebuah teks. Kita juga dapat menggunakan property “color” untuk menerapkan warna gradien pada suatu teks, tapi saat ini fitur ini belum di support pada semua web browser. Simak artikel ini lebih lanjut untuk membuat teks dengan warna gradien menggunakan HTML dan CSS.
Daftar Isi
Kode CSS
Disini kita akan menggunakan ekstensi “webkit” yaitu “-webkit-background-clip” untuk menerapkan warna gradien pada teks. Kemudian, “-webkit-text-fill-color” untuk mendefinisikan warna yang digambar pada konten yang ada didalam huruf-huruf. Terakhir, tambahkan properti “background” seperti kode dibawah ini.
body{
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
h1 {
font-size: 48px;
background: -webkit-linear-gradient(280deg, #27c1c3, #dd2dd5);
text-align: center;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
Kode HTML
Kode HTML yang digunakan adalah dibawah ini.
<!DOCTYPE html>
<html>
<head>
<TITLE>Teks dengan Warna Gradien</TITLE>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Text Gradient </h1>
</body>
</html>
Hasil yang diperoleh
Berikut ini adalah hasil yang diperoleh saat kalian menjalankan pada browser di komputer atau laptop yang digunakan.
Temukan source code HTML dan CSS lainnya hanya di Inpows.
Baca Juga
Menyembunyikan Action Bar Pada Android
Konversi Milidetik ke Detik dan Menit di Kotlin
Memahami Read Write dan Menampilkan Gambar Menggunakan OpenCV di Python
Menambahkan Speckle Noise Pada Citra Menggunakan Scikit-image di Python