Menulis teks dengan gradien warna

Hari ini saya menawarkan tip CSS. Di CSS, gradien sangat populer, mereka memungkinkan desain yang bersih dan cantik. Kebetulan kami ingin menggunakan properti "color" untuk menerapkan gradien ke teks, sayangnya saat ini fitur tersebut tidak didukung oleh browser web. Itulah mengapa saya mengusulkan Anda tutorial sederhana untuk menerapkan gradien linier ke teks.

Anda dapat melihat hasil akhirnya di bawah ini:

tab default

Untuk melakukan ini, kami akan menggunakan ekstensi "webkit". Pertama-tama kita akan menambahkan " -webkit-background-clip " yang memungkinkan untuk menerapkan gradien ke teks.
Belajarlah lagi…

Kemudian kita akan menambahkan properti ini: " -webkit-text-fill-color " yang memungkinkan untuk menentukan warna yang digunakan untuk menggambar isi surat.
Belajarlah lagi…

Terakhir, kita akan menerapkan gradien dengan properti: " background ", yang merupakan properti dasar CSS.

Kode lengkapnya:

 <!DOCTYPE html> <html> <head> <style> h1 { font-size : 72px ; background : -webkit-linear-gradient ( 350deg , #22c1c3 , #fd2df5 ); -webkit-background-clip : text ; -webkit-text-fill-color : transparent ; text-align : center ; } </style> </head> <body> <h1> Text Gradient </h1> </body> </html>
May 2, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *