Hallo teman-teman bertemu lagi pada tutorial dumet school, pada tutorial kali ini kita akan belajar tentang penggunaan transisi css untuk merubah warna text pada inputan.

Bagi teman-teman yang sudah mengenal css atau sudah pernah belajar tentang css pasti tau tentnag css transisi, css transisi berfungsi untuk memberikan efek animasi pada sebuah element html, nah pada contoh kasus kali ini kita akan gunakan transisi untuk merubah warna tulisan pada inputan.

Oke kita langsung saja praktekan, teman-teman silahkan buat sebuah file dan ketikan script berikut ini:

Script diatas saya membuat sebuah file html lalu saya membuat sebuah inputtan dengan type text, jika sudah silahkan di save, hasilnya masih seperti biasa, nah sekarang kita akan atur cssnya, silahkan teman-teman tambahkan script css internah berikut ini:

Sehingga kelengkapan scriptnya adalah seperti berikut ini:

 

Saya mengunakan atribut selector untuk mengatur inputannya lalu saya mengatur warna merah dengan transisi 0.5s, setelah intu saya membuat pengaturan lagi ketika koncisi focus, atau ketika element inputannya diklik berubah warna menjadi biru, namun ada efek transisinya.

Jika sudah silahkan teman-teman save dan jalankan pada browser, perhatikan efek perubahan warna pada textnya.

Gimana teman-teman mudah bukan, untuk tutorial kali ini tentang penggunaan transisi css untuk merubah warna text pada inputan cukup sampai disini dulu, semoga tutorial kali ini bermanfaat untuk teman-teman semuanya, sampai bertemu pada tutorial berikutnya,

terimakasih.