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 LainnyaInilah 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, KodenyaEfek Warna Tulisannya adalah Efek Warna Tulisan yang Kita Inginkan, Misalnya Gradient Linear, Gradient Radial Ataupun Gambar. Contoh:
background-image: Efek Warna Tulisannya;
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 GambarTambahan, 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.
url(http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs1343.snc4/161424_100000687376511_2513045_n.jpg)
6 komentar
Yang mesti di tekankan sebenarnya kode ini:
Reply-webkit-background-clip: text; -webkit-text-fill-color: transparent;
Kalu itu hilang maka hanya mengisi background, sebenarnya untuk moz juga ada akan tetapi hanya untuk background belum mendukung fill text.
-moz-radial-gradient(center 20deg, circle closest-side, orange 0%, red 100%)
Hanya sintax yang berbeda, yah.. seperti pemberian rounded corner.
ohya, -webkit-background-clip: text; -webkit-text-fill-color: transparent;
Replykan sudah saya jelaskan di postingan ini...
kalau untuk moz radialnya sengaja tidak saya kasih, karena percuma...
soalnya css3-fill hanya ada di webkit..
dan text-gradient ini dapat terlihat kalau ada css3-fill-nya..
sebelumnya! trimakasih kritikannya,..!!
waw
Replyterus bermain CSS ya
mantap blognya... unsur pelangi... :)
Reply@Dhini Aryna
Replytrimakasih dhini...!!!
@Bang Nano
yupz, kita harus bangga dengan template buatan sendiri..
:D D: :D
cara merubah warna template yang ada di paling bawah itu gimana gan...
ReplyYang ada tulisan *Semoga Blog Ini Bermanfaat Untuk Semuanya!!!