Membuat Efek Brushed Metal Di Tulisan Dengan CSS Gradient

Pernah ada murid kami bertanya, "bisa kah text heading ( h1 - h6 ) diberikan gradient?" Dengan alasan, kalau text di ubah menjadi gambar maka akan menambahkan size dan loading time di website. Dan selama ini biasanya banyak teman-teman menggunakan gambar sebagai alternatif.  

Sebenarnya bisa membuat efek gradient di text dengan bantuan CSS. Masalahnya, untuk saat ini hanya Browser Webkit yang mendukung ini.  

Untuk Contoh, mari kita coba yuk...

Silahkan ketik CSS nya seperti gambar di bawah ini.

Bisa diaplikasikan untuk semua text. Maka hasilnya yang akan di lihat adalah seperti gambar di bawah ini. Gradient ini hanya bisa dipakai oleh Google Chrome dan Safari dan hanya browser mereka yang bisa memunculkan efek Gradient Text. Sedangkan yang lainnya hanya memunculkan warna dasarnya saja.

Silahkan akses codenya di link ini http://jsfiddle.net/YbLEV/

Selamat mencoba