Membuat Text Link Warna Gradient

Membuat Text Link Warna Gradient - FSodic Gradient Illustration



FSodic.ID - Halo mblo, gimana wifi tetangga lancar? Pie passwordnya udah diganti :wkwk: Posting kali ini saya sedikit membahas tentang css gradient. Nah mungkin diantara kalian sudah banyak yang tahu cara membuat background gradient. Tapi pernahkah kalian membuat text-nya menjadi warna gradient. Langsung simak saja tutorialnya!



1. HTML

Kita akan mengubah link dengan id btnGradient sehingga silahkan disiapkan dahulu htmlnya seperti ini:



<a href="https://www.fsodic.id" id="btnGradient">www.fsodic.id</a>


2. CSS

Lanjut ke css-nya:



a#btnGradient{

  background: linear-gradient(90deg, #000, #f00);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}


Demo:

www.fsodic.id



Pie, bagus kan? :palu:



Perlu diingat, -webkit-text-fill-color tidak semua browser menudukung properti ini sehingga sangat disarankan untuk menghindari hanya menggunakan properti ini selain ada tambahan properti lain seperti warna dll.



MDN:

Lihat Browser compatibility: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color



Oke mblo cukup sekian posting kali ini, jangan lupa amankan password wifi tetangga ya :gagah:

Komentar

Posting Komentar

Postingan populer dari blog ini

Membuat Fakelink dengan JQuery

Gambar
FSodic.ID  - Halo para jomblo yang kalo malam minggu pura-pura tidur, gimana masih suka tethering dari hp temen atau masih tetap sama wifi tetangga yang tiap minggu ganti-ganti password? :wkwk: Oke pada kesempatan kali ini, saya akan membagikan tutorial , how to , pie carane  membuat link palsu. Tapi inget,  bukan link berita palsu, berita hoax atau berita-berita adu domba yang sering dipercaya emak-emak jaman now ya :gagah:. Nah sebelumnya saya akan jelaskan sedikit maksud dari link palsu disini. Link palsu disini maksudnya adalah ketika kalian mengunjungi sebuah situs, lalu terdapat link yang atribut href -nya https://www.fsodic.id namun ketika kalian klik ternyata linknya mengarah ke situs lain. Metode ini emang cocok banget buat nyangkul dollar ketika dipasang di link download untuk situs-situs download, situs-situs referral, atau sejenis lainnya yang bisa diarahkan ke safelink kalian atau apapun. Kenapa saya bilang cocok, karena tidak sedikit yang menyorot...
Baca selengkapnya

Change Event Select di Javascript

Gambar
FSodic.ID  - Halo para jomblo, gimana kabar kalian? Wifi aman? Atau lagi terisolir? Tenang, make VPN bisa kok buat buka isolirnya :wkwk: Oke dikesempatan kali ini, saya akan membagikan tutorial Event Onchange dengan Pure Javascript dan JQuery. Jadi gak main-main tutorialnya langsung 2 bentuk :gagah: Mengingat ada salah satu tema di WapBlog.ID yang tidak menggunakan Internal atau External Javascript, Posting ini mungkin bisa untuk menambah materi posting yang ntah berapa tahun tidak ada tambahan :wkwk: Mengintip menu tema tersebut, saya mendapatkan element seperti ini: <select class="mudon" name="url" onchange="window.open(this.options[this.selectedIndex].value,'_top')"> <option>Menu</option> <option value="https://official.wapblog.id">Home</option> <option value="https://official.wapblog.id/about.xhtml">About</option> </select> Kita analisa terlebih dahulu, terdapat attribut on...
Baca selengkapnya

Membuat Animasi Loading dengan JQuery

Gambar
FSodic.ID  - Halo para jomblo, gimana kabar kalian? Wifi tetangga aman? atau lagi terisolir belum dibayar :wkwk: oke sambil nunggu tetangga ke Indomaret buat bayar wifinya, mending ikuti tutorial di fsodic.id. Tenang, tutorial di fsodic.id gak akan ngebahas tentang PHP, Linux, Ubuntu atau Android melainkan hanya tutorial-tutorial tentang blog khususnya blog di WapBlog.ID  dan mungkin bisa diaplikasikan ke situs atau blogmu diluar WapBlog.ID. Pada kesempatan ini, saya akan ngebahas salah satu permintaan user yang meminta Tutorial Membuat animasi loading pada blog. Berhubung sedang buntu buat ngepost setelah semalam buat ngejar versi Baru WapBlog.ID bagian Akun Set, mau main PUBG juga too soon mulu :wkwk: dan saya juga lagi cari-cari bahan postingan, ya okelah. Oke, sebelum kita mulai alangkah baiknya kalian siapkan dulu alat-alat pendukung berikut: - Secangkir kopi hitam - Sebungkus rokok L* Bold - Putar lagu yang membara - Dan setoples cemilan Apabila sudah siap, yu...
Baca selengkapnya