Januari 30, 2011   CSS3 , Efek Tulisan , Webkit

EFEK TULISAN GRADIENT

GRADIENT TEXT DENGAN CSS3??? Wah! Tahu Gak? Tulisan di Atas di Buat dari CSS3 Lho, Efeknya Kaya Gradient Khan? Itulah yang di Namakan Berma...

GRADIENT TEXT DENGAN CSS3???

Wah! Tahu Gak? Tulisan di Atas di Buat dari CSS3 Lho, Efeknya Kaya Gradient Khan?
Itulah yang di Namakan Bermain Dengan CSS3, dan dengan Terus Bermain, Akhirnya Bisa Dech Buat Efek Kaya Gituan! Ohya, Gak Mau Ngomong Panjang, Lebar dan Tinggi. Kita Langsung Ke Tutorialnya!!!

Cara Membuatnya

<div style="-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#140F66), to(#2DED18), color-stop(.6,#68E0ED)); font-family: trebuchet ms; font-size: 39px; padding-top:10px 0px;">
Tulisan Kamu</div>

Seperti Biasa, Kodenya Dapat Kamu Modif Sesuai dg Ke Inginanmu dan Dapat Tempatkan di Postinganmu, di Gadgetmu Atapun Lainnya

Inilah Penjelsan dari Kode di Atas

Awal Untuk Membuatnya di Butuhkan Kode
-webkit-background-clip: text; -webkit-text-fill-color: transparent;

Setelah Itu, Barulah Kita Tambahkan Efek Background Pada Tulisannya, Kodenya
background-image: Efek Warna Tulisannya;

Efek Warna Tulisannya adalah Efek Warna Tulisan yang Kita Inginkan, Misalnya Gradient Linear, Gradient Radial Ataupun Gambar. Contoh:

Efek Warna Tulisan Gradient Linear
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#140F66), to(#2DED18), color-stop(.6,#68E0ED))

Efek Warna Tulisan Gradient Radial
-webkit-gradient(radial, 480 25, 20, 500 25, 40, from(#FCFCFC), to(#CF0C13), color-stop(.6,#E88787))

Efek Warna Tulisan dengan Gambar
url(http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs1343.snc4/161424_100000687376511_2513045_n.jpg)

Tambahan, Tulisan Dengan Efek di Atas Ini Hanya Dapat Tampil Sempurna Atau Hanya Dapat di Lihat Untuk Browser Berbasis Webkit, Seperti Google Chrome, Apple Safari dan Flock.