Membuat Text Shadow Dengan HTML5

Membuat Text Shadow Dengan HTML5 - Wow, sebenarnya saya tidak begtu bisa main CSS, CSS3 apa lagi HTML5 tak taulah ditambah HTML Canvas. Walaupun tak tahu benar, saya coba-coba share saja bagaimana Membuat Text Shadow Dengan HTML5 setelah dikesempatan sebelumnya juga posting tentang tutorial blogspot Membuat tombol page navigasi postingan keren. Oke langsung saja kalau mau terapinnya tinggal copykan di Edit HTML pada saat membuat postingan. Karena saya tak cukup mampu untuk menerangkannya, jadi mungkin sobat bisa memahaminya sendiri.

Membuat Text Shadow Dengan HTML5 (1) >>

Pakai kode ini:>>
<canvas height="90" id="bayanganx" width="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('bayanganx');
var ctx = canvas.getContext('2d');
ctx.font = "bold 40px Algerian";
ctx.shadowColor = "#999";
ctx.shadowOffsetX = 10;
ctx.fillStyle = "red";
ctx.fillText("Blogger Indonesia", 0,50);
</script>


Membuat Text Shadow Dengan HTML5 (2) >>




Pakai kode ini:>>

<canvas height="90" id="bayangany" width="420"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('bayangany');
var ctx = canvas.getContext('2d');
ctx.font = "bold 40px Verdana";
ctx.shadowColor = "#999";
ctx.shadowOffsetY = -10;
ctx.fillStyle = "lime";
ctx.fillText("Blogger Indonesia", 0, 50);
</script>

Membuat Text Shadow Dengan HTML5 (3) >>






Pakai kode ini:>>

<canvas height="90" id="blury" width="650"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('blury');
var ctx = canvas.getContext('2d');
ctx.font = "bold 40px Comic Sans MS";
ctx.shadowColor = "yellow";
ctx.shadowBlur = 20;
ctx.fillStyle = "red";
ctx.fillText("Blogger Indonesia Keren!", 0, 50);
</script>

<canvas height="150" id="mycanvas" width="350"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
var ctx = canvas.getContext('2d');
ctx.font = "bold 40px Georgia";
ctx.shadowColor = "#111";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.shadowBlur = 12;
ctx.fillStyle = "blue";
ctx.fillText("HTML5 canvas", 0, 100);
</script>

Mungkin itulah jenis  Text Shadow Dengan HTML5 yang dapat saya share seperti diatas, semoga ini semua bisa bermanfaat...