Gradient Text dengan HTML5 & Javascript

Gradient Text dengan HTML5 canvas dan Javascript

Setelah sekian lama vakum ngeblog, kali ini Syndicate OS akan me-repost postingan dari blog mas Hendro yang dihapus pihak blogger, berhubung saya tidak ada inspirasi untuk posting, jadi saya "jiplak" saja postingannya, piis mas Hendro ^_^ v

Baiklah langsung saja ke topik permasalahannya, tips ini akan membahas bagaimana Cara Membuat Text Gradient dengan HTML 5 Canvas dan Javascript , mari kita mulai ! :)

1. Text Linear Gradient Vertical







Code untuk tulisan di atas yaitu :
<canvas height="70" id="bayangan" width="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('bayangan');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 0, 50);
g.addColorStop(0,'red');
g.addColorStop(.7,'green');
g.addColorStop(.3,'blue');
g.addColorStop(1,'yellow');
ctx.font = "bold 50px Impact";
ctx.shadowColor = "red";
ctx.fillStyle = g;
ctx.fillText("Syndicate OS", 0, 50);
</script>
code di atas dapat sobat sesuaikan dengan keinginan sobat :)
Ok kita lanjut Membuat Text Gradient dengan HTML 5 Canvas dan Javascript dengan model yang berbeda

2. Text Linear Gradient Horizontal





Code yang saya gunakan yaitu :
<canvas height="90" id="bayangany" width="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('bayangany');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 400, 0);
g.addColorStop(0, '#000');
  g.addColorStop(1 / 8, '#00f');
  g.addColorStop(2 / 8, '#0f0');
  g.addColorStop(3 / 8, '#0ff');
  g.addColorStop(4 / 8, '#f00');
  g.addColorStop(5 / 8, '#f0f');
  g.addColorStop(6 / 8, '#ff0');
  g.addColorStop(7 / 8, '#fe0');
  g.addColorStop(1, '#f8f');
ctx.font = "bold 45px Georgia";
ctx.shadowColor = "red";
ctx.fillStyle = g;
ctx.fillText("Blogazine", 0, 50);
</script>

3. Text Linear Gradient Diagonal












Souce Code :
<canvas height="100" id="gd" width="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('gd');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 400, 100);
g.addColorStop(0, '#000');
  g.addColorStop(1 / 8, '#00f');
  g.addColorStop(2 / 8, '#0f0');
  g.addColorStop(3 / 8, '#0ff');
  g.addColorStop(4 / 8, '#f00');
  g.addColorStop(5 / 8, '#f0f');
  g.addColorStop(6 / 8, '#ff0');
  g.addColorStop(7 / 8, '#f03');
  g.addColorStop(1, '#eee');
ctx.font = "bold 40px Comic Sans MS";
ctx.fillStyle = g;
ctx.fillText("Saya bukan Hacker!", 0, 50);
</script>

4. Linear Gradient Text-Shadow Blur






Source Code :
<canvas height="100" id="y" width="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('y');
var ctx = canvas.getContext('2d');
var g = ctx.createLinearGradient(0, 0, 100, 200);
g.addColorStop(0, '#FF0000');
g.addColorStop(.6, '#BF3EFF');
g.addColorStop(1, '#FFD700');
g.addColorStop(.5, '#F5F5F5');
ctx.font = "bold 40px Georgia";
ctx.shadowColor = "#FF3030";
ctx.shadowBlur = 20;
ctx.fillStyle = g;
ctx.fillText("Kopi tubruk enak nih gan!", 0, 50);
</script>

5. Linear Gradient Text Rotate






Source Code :
<canvas height="150" id="shadowx" width="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('shadowx');
var ctx = canvas.getContext('2d');
var g = ctx.createRadialGradient(200, 150, 20, 200, 150, 150);
g.addColorStop(0, '#FF0000');
g.addColorStop(.6, '#FFFF00');
g.addColorStop(1, '#B0E2FF');
g.addColorStop(.5, '#F5F5F5');
ctx.font = "bold 50px Georgia";
ctx.shadowColor = "rgb(190, 190, 190)";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 10;
ctx.fillStyle = g;
ctx.rotate(-0.25);
ctx.fillText("Blog + Magazine", 0, 150);
</script>
Demikianlah tips Cara Membuat Text Gradient dengan HTML 5 Canvas dan Javascript dari saya semoga bermanfaat, jika ada yang perlu ditanyakan,silahkan tanyakan melalui komentar di bawah ini :)

83 comments:

Februari 27, 2012 5:23 PM Permalink

PERTAMAX diamankan --"

Februari 27, 2012 9:49 PM Permalink

wuihh kerennn

Februari 28, 2012 5:02 PM Permalink

@IT SOft Center : Makasih :)

Februari 28, 2012 6:32 PM Permalink

keren banget teks-nya dengan gradient warna-warninya :-)

Februari 29, 2012 2:49 PM Permalink

Maksih mas :)

Februari 29, 2012 9:23 PM Permalink

Warna gradient emang mantap gan, nice info nih... :D

Februari 29, 2012 9:29 PM Permalink

sumpah aq gak ngerti canvas thanks ya tutornya wkwkw

Februari 29, 2012 9:30 PM Permalink

sumpah aq gak ngerti canvas thanks ya tutornya wkwkw

Maret 01, 2012 1:30 PM Permalink

@Fahmi : makasih
@MAs Randy: ini tips dari mas Hendro, saya cuma repost :D

Maret 01, 2012 2:10 PM Permalink

becak edannnnnn mantap nyos

Maret 01, 2012 3:41 PM Permalink

Ф дфѕдғфдғ Ф : makasih :)

Maret 02, 2012 7:35 PM Permalink

link udah tertancap
linkback yoi brow

Maret 02, 2012 8:06 PM Permalink

Link back sukses:)

Maret 03, 2012 11:30 PM Permalink

Wow... MANTAAFFF BANGEET!!!
Kalo pake Canvas gitu tampilannya jadi kayak idup yach!!
Ayas pertama tau HTML5 CANVAS gituan dari Blog Admin punya Bang Hendro tuh.. KAGUM!!!!
Ayas ijin bookmark yach Bang... karena menarik banget
kalo dibikin postingan!!!
MAKASI BANGET!!!

Maret 03, 2012 11:56 PM Permalink

anyway versi responsive nya blom ketemu ya?

Maret 04, 2012 12:39 AM Permalink

Mas Ayas : ini emang dari blognya mas hendro yang blogger admin saya repost karena blogger admin di hapus pihak blogger :)
mas randy : saya ngga paham kalo segala sesuatu yang berhubunagn dengan responsive :D

Maret 04, 2012 12:39 AM Permalink

Komentar Perdana di sini :D

Maret 04, 2012 8:56 PM Permalink

Wuihh keren :D

Maret 04, 2012 8:57 PM Permalink

Mantap langsung ku boorkmark :D

Maret 04, 2012 9:05 PM Permalink

Torasurabaya: makasih :)
silahkan bookmark

Maret 07, 2012 4:00 PM Permalink

Enak klo pake canvas itu seperti gimana gitu, pokonya mantep deh klo buat teks.

Maret 07, 2012 8:24 PM Permalink

kren2 nih efek gradiennya ijin di ctrl+d dulu ya gan siapa tau tar butuh,,
thank untuk ilmunya gan
salam kenal

Maret 08, 2012 8:29 AM Permalink

link udah di pasang kak
:)
di tunggu link baliknya
BTw Blognya keren ne kak
bisa beda2 warna gini
:D

Maret 08, 2012 12:38 PM Permalink

widih warna-warni neh mas:)

kayaknya bagus kalau yang bertemakan anak-anak sehingga tampilannya bisa tambah manis.

Maret 08, 2012 2:44 PM Permalink

@BlogCunayz : salam kenal juga :)
@Mas Amdhas : sorry ya mas, saya repost postingan di blog Blogger Admin :)
@d3t3ct1v3c0d3n3t: seep kak,
@Mas Endy : maksih mas

Maret 12, 2012 4:26 AM Permalink

wah gan numpang koment ya . senuai motonya: Berkomentarlah sebelum komentar itu dilarang :D heheh

Maret 12, 2012 1:31 PM Permalink

@Doodeyz.us : makasih :)
@resep masakan padang : hehe
siipp
kapan2 balik lagi ya :D

Maret 15, 2012 10:02 AM Permalink

jagan yg alam perwira bang, coba liat blogku yg di profil ini :)

Maret 16, 2012 4:04 AM Permalink

izin coba dulu ya mas bro

Maret 17, 2012 9:20 PM Permalink

lama banget gak apdet wakwak

Maret 18, 2012 1:22 PM Permalink

wahh, mantep" teksnya... :D

Maret 19, 2012 10:24 AM Permalink

manrabb masbroth

Maret 22, 2012 6:36 AM Permalink

Wah wah bagus mas gradientnya, hehehehehe pngen mkek nih jadinya aq?

Maret 22, 2012 4:38 PM Permalink

mantappp keren banget :D

Maret 25, 2012 12:09 PM Permalink

muantab gan :D baru tau ane... nice share :)

Maret 30, 2012 9:39 AM Permalink

Keren-keren sob.

ap kabar sob? ane abis vacum mencoba eksis lagi nih :D
paling abis ini vakum lagi mau UNAS soalny. sukses selalu yah buat blogny ane suka yg Linear Gradient Text-Shadow Blur

April 01, 2012 4:53 PM Permalink

@Cek Info : Semoga kita sama2 lulus sob
@Gedek, Abed Saragih , Fahmi : Makasih

April 05, 2012 5:34 PM Permalink

mancap...
tp gimana dgn SVG!
hohoho :P

April 05, 2012 5:47 PM Permalink

Mas Beben : Saya ngga begitu paham sama HTML 5 mas, :D

April 06, 2012 12:37 PM Permalink

Wow manteb, tapi sayang di Google Chrome efek nya hampir tidak ada sama sekali, bahkan contoh tulisannya kagak ada, hehehe... pisss :D

April 14, 2012 1:06 AM Permalink

Saya rasa SVG tidak ada sangkut pautnya dengan HTML-5, yang menjadi pertanyaan saya penggunaan canvas pada gradient text apa cukup efektif diterapkan pada sebuah blog ?

April 14, 2012 8:29 AM Permalink

Mas Deny : saya juga bingung mas, waktu loading masih muncul, pas selesai loadingnya, malah hilang canvasnya
Mas Rudy : kayanya kurang cocok masa :)

April 15, 2012 6:05 PM Permalink

Mantappp. coba dulu ahhh :D

April 21, 2012 8:45 AM Permalink

@Syndicate OS Test Reply pake Desain Komentar Mas Taufik :D

April 21, 2012 8:52 AM Permalink

@Syndicate OS Test Reply Lagii :D

April 21, 2012 12:47 PM Permalink

@Fahmi Setiawan silahkan :)

April 21, 2012 8:14 PM Permalink

Wah keren Nih Asli Gradient :D

April 23, 2012 11:46 AM Permalink

@system of blog
emang gradien sih mas, tapi waktu selesai loading, textnya hilang T.T

April 26, 2012 9:36 AM Permalink

keren sob buat efek teks gradient perlu diamankan nihh

April 26, 2012 9:46 AM Permalink

@Widodo hehe
silahkan :)

April 26, 2012 8:25 PM Permalink

Kok di buka tiap browser hasilnya beda beda ya ?
tapi keren gan

April 27, 2012 7:26 AM Permalink

@Ardha Herdianto kalo hasilnya beda tiap browser saya ngga tau gan, lagian saya cuma make FF :)

April 28, 2012 2:35 PM Permalink

Hehehe.... YEEEE... akhirnya ngepos lagi :P

April 29, 2012 12:58 PM Permalink

@Taufik Nurrohman Maaf banget mas, tampilan komentarnya saya tiru, soalnya desainnya keren bgt :)

April 29, 2012 9:39 PM Permalink

wewewe keren bngt gan,,,

April 29, 2012 10:15 PM Permalink

@Miftachudin makasih :)

Mei 09, 2012 1:48 AM Permalink

mantaap ni Mass..

Mei 15, 2012 3:44 PM Permalink

meskipun menjiplak tapi di sertakan pemilik nya :D

Anonim
Mei 15, 2012 9:58 PM Permalink

mantap2 kalau pakai CSS3 ya?
jadi pengen belajar sob ,,,

wilujeng ngeblog

Mei 16, 2012 10:31 AM Permalink

@Mhicyko Ahada N. kapan2 komentar lagi
wkwkwkwk :P

Mei 16, 2012 10:34 AM Permalink
Mei 16, 2012 10:35 AM Permalink

@MHARJIPES.COM makasih :D

Mei 16, 2012 10:35 AM Permalink

@Fahmi Setiawan
iya html5 emang mantap :D

Mei 16, 2012 10:35 AM Permalink

@Gedek silahkan dipelajari
hehe
sama2 blajar

Mei 16, 2012 10:36 AM Permalink

@Abed Saragih makasih, silahkan dicoba :D

Mei 16, 2012 10:37 AM Permalink

@Dwiky Reynaldi ya begitulah,
saya cuma copas
hehe

Mei 16, 2012 10:37 AM Permalink

@Pangerankodok masih meding daripada perkataan yang tidak dipertanggungajawabkan

Mei 16, 2012 10:37 AM Permalink

@sakahayang.com ini pake html5 mas :)

Juni 04, 2012 10:42 AM Permalink
Juni 07, 2012 12:41 PM Permalink

Wahhh, kereen.. Info yang bagus.

Juni 07, 2012 12:43 PM Permalink

boleh di copy ya :)

Juni 07, 2012 12:45 PM Permalink

izin copy ya :)

Juni 07, 2012 12:45 PM Permalink

izin copy ya :)

Juni 07, 2012 12:45 PM Permalink

Wahhh, kereen.. Info yang bagus.

Juni 08, 2012 11:11 AM Permalink

@Lika Jafni Hirda silahkan mbak :)

Juli 14, 2012 4:34 PM Permalink

mantep kk :)

Juli 15, 2012 4:45 PM Permalink

full color

September 08, 2012 11:30 PM Permalink

waww kometnya mirip dte. mantap :)

Oktober 14, 2012 9:21 AM Permalink

keren gan ...

Desember 08, 2013 7:19 PM Permalink

keren dan bagus

Desember 08, 2013 7:19 PM Permalink

mantap deh

Tambahkan Komentar Anda

Berkomentarlah Sebelum Komentar Itu Dilarang !