Membuat Efek Brushed Metal Di Tulisan Dengan CSS Gradient

12/02/2014    Agustinus    1187     Website

Kursus Website, Kursus Web Design

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.

Kursus Website, Kursus Web Design

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.

Kursus Website, Kursus Web Design

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

Selamat mencoba smiley

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More