Membuat Text Gradient Dengan CSS
Kalau pada postingan sebelumnya sudah saya share tentang cara membuat efek text stroke dengan css, maka pada postingan ini izinkan saya mendokumentasikan hasil otak-atik menggunakan css lainnya, yakni tentang cara membuat efek gradient pada text. Tapi lagi-lagi cara ini hanya bisa ditampilkan dengan browser/peramban berbasis WebKit seperti Google Chrome dan Safari. Untuk yang gecko seperti Firefox kayaknya belum support, kalaupun bisa menampilkan text gradient harus dikombinasikan dengan sebuah gambar format png untuk memberikan efek gradasinya, atau mungkin ada yang tahu caranya? bisa tolong ajari saya, suerrr …!!! mumpung lagi getol-getolnya belajar CSS3.
Tidak berpanjang kalam, kita langsung ke TKP nyookkk …. dan ini hasil screenshortnya :
Untuk memberikan efek gradasi pada sebuah text/font bisa menggunakan kode seperti contoh berikut ini :
<div style="font-family: arial black; font-size: 63px; background: -webkit-gradient(linear, left top, left bottom, from( #00FF99), to( #000099)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">TEKS ANDA DI SINI</div>
Hasilnya akan seperti ini (harus menggunakan Google Chrome/Safari) :
Contoh lainnya, kita juga bisa membuat efek gradasi seperti warna pelangi, contoh kodenya seperti ini :
<div style="font-family: arial black; font-size: 63px; background: -webkit-gradient(linear, left bottom, right top, from(red), color-stop(15%,orange), color-stop(30%,yellow), color-stop(45%,green), color-stop(60%,blue), color-stop(80%,#DA15CA), to(violet)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">TEKS ANDA DI SINI</div>
Hasilnya akan seperti ini :
Contoh text gradient dengan efek stroke, kodenya adalah :
<div style="font-family: arial black; font-size: 63px; -webkit-text-stroke: 3px grey; background: -webkit-gradient(linear, left top, left bottom, from(#A50C1E), to(#DDBF18)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"> TEKS ANDA DI SINI</div>
Hasilnya akan seperti ini :
Contoh text gradient dengan shadow :
Contoh text gradient dengan 3 warna gradasi, kodenya kira-kira seperti ini :
<div style="font-family: Georgia; font-size: 63px;font-weight:bold; -webkit-text-stroke: 2px grey; background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#006e2e), color-stop(53%,#8f0222), color-stop(100%,#f1da36)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">TEKS ANDA DI SINI</div>
Hasilnya akan seperti ini :
Efek gradasi di samping menggunakan tipe linear
anda juga dapat menggunakan radial, angle
dan lain-lain, silahkan berimprovisasi sesuka anda termasuk juga pemilihan warnanya.
ijin tanya dulu, di atas ada penjelasan untuk safari dan chrome
kalau mozilla gimana mas
Reply
Alwi Reply:14-10-2010 at 16:46
Untuk Firefox cara menampilkan gradasi pada text atau font atau text gradient masih memerlukan bantuan sebuah gambar format PNG semi transparan, di postingan berikutnya insya Allah akan saya bahas.
Reply
weeeh….tambah nyuuusss dah :mrgreen:
Pagi Om :lol:
Reply
ini saya pake chrome mas..
wahh kereeennn bs gradient colorr
Reply
Barcode Printer Reply:16-10-2010 at 12:19
saya juga pake chrome enaq dah
Reply
dicoba dlu om buatnya.. sambil dipelajari
Reply
Hybrid car Reply:15-10-2010 at 10:56
dicoba deh mas finical… hehe…
Reply
Barcode Printer Reply:16-10-2010 at 12:18
mulai belajar lagi hari ini disini di blog ilmu web
Reply
ditinggal empat hari….ternyata masih ada di posisi aman… :D
Reply
setelah text stroke, ijin mencoba yang gradient text bung….
Reply
It’s the very thing i want to catch. Thanks!
This is the wonderful thing i spend long time to find it.
Reply
Hybrid car Reply:22-10-2010 at 09:39
Nice to meet you sir….
Reply
Belajar tiada henti dengan tips dan trik nge blog
Reply
Hybrid car Reply:19-10-2010 at 12:33
iya sob…tetap semangat… !
Reply
Very good!! thanks ya
Reply
sekarang saya menggunakan OS Google Chrome dan demo artikel kali ini ttg gradient nampak menawan :)
Reply