Bagaimana membuat baground Warna Otomatis di HTML5 ?
S ahabat Bloggers yang berbahagia, penampilan efek warna yang fulgar dan sungguh menarik pada HTML5 yang dapat kita saksikan demonya disini. Anda tertarik untuk membuatnya? silahkan ke HTML5 dulu ya...? kemudian Anda bisa membuatnya seperti dikisahkan oleh sahabat saya di http://ngisup.com/efek-gradasi-background-css-html5 yang telah menjadikan script efek warna gradient seperti berikut ini. Saya berharap hal ini Anda lakukan setelah Anda memahami dasar-dasar HTML. Sebelum Anda menerapkan silahkan Anda membuat dalam halaman terpisah sehingga tidak berakibat buruk pada template milik Anda.
Ini bagian CSS, bisa di terapkan diatas tag ]]<b:skin> dengan membuang tag <style type="text/css">........ </style> atau antara tag ]]<b:skin> dengan tag </head> dengan CSS lengkap seperti berikut ini.
<style type="text/css">canvas
{
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
z-index:-1;}
</style>
Ini Bagian Body yang dapat di pasang antara <body> .... </body> seperti script berikut ini, sekali lagi penerapannya hanya berlaku pada HTML5, mohon hati-hati untuk menerapkan pada template Anda jika masih menggunakan HTML versi 1.1.
<canvas height="600" width="600"></canvas><script>
var canvas = document.getElementsByTagName('canvas')[0],
ctx = null,
grad = null,
body = document.getElementsByTagName('body')[0],
color = 255;
if (canvas.getContext('2d')) {
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 300, 300);
ctx.save();
// Create radial gradient
grad = ctx.createRadialGradient(0,0,0,0,0,600);
grad.addColorStop(0, '#fff');
grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
// assign gradients to fill
ctx.fillStyle = grad;
// draw 600x600 fill
ctx.fillRect(0,0,600,600);
ctx.save();
body.onmousemove = function (event) {
var width = window.innerWidth,
height = window.innerHeight,
x = event.clientX,
y = event.clientY,
rx = 600 * x / width,
ry = 600 * y / width;
var xc = ~~(256 * x / width);
var yc = ~~(256 * y / height);
grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
grad.addColorStop(0, '#fff');
grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc,
')'].join(''));
ctx.fillStyle = grad;
ctx.fillRect(0,0,600,600);
};
}
</script>
Untuk mencoba melihat demonya silahkan ke sini dengan menggerakkan mous Anda maka baground akan berubah otomatis. Anda tertarik membuatnya? sebelum dipraktekkan silahkan Anda buat di sebuah laman baru sebagaimana biasa Anda membuat posting baru. Kemudian Anda simpan dan lakukan gerakan mouse Anda... apakah bisa sukses? Jika belum ... sukses silahkan blog Anda upgrade ke HTML5 dengan CSS3... OK?. Happy Blogging...! Anda ingin membuat yang sudah jadi? silahkan kopy HTML berikut, untuk CSSnya silahkan pasang di bawah tag ]]<b:skin> untuk scriptnya pasang dimana anda ingin membuatnya. Jika Anda bermaksud membuat semua berwarna otomatis maka dapat dipasang diatas </head> namun jika hanya sebagian saja maka silahkan pasang di posting Anda.
Ini style CSS-nya
<style type="text/css">canvas
{
height:100%;
left:0;
position:absolute;
top:0;
width:100%;
z-index:-1;}
</style>
Ini HTML script js-nya
<canvas height="150" id="shadowx" width="600"></canvas><script type="text/javascript" src:"http://infotokosurya62.googlecode.com/files/scriptgradientautomatic.js"></script>
Demikian konten saya kali ini semoga bermanfaat, ada salah dan khilaf mohon maaf dan akhir kata billahitaufiq walhidayah...
Wassalamu'alaikum Warakhmatullohi wabarakatuh.
Bisnis terpercaya di Joko Susilo.com dan Stop Dreaming in action Info Toko Surya62. Bisnis spektakuler Best Marketing place, Konten Islami, Bisnis click-bank, Blakblakan Marketing Online, Smart Machine System V 2.0, submit terbaik, MobiGarda-Iphone. Mari cari Uang di Internet bersama dengan klik berikut ini di Info Toko Surya62
No comments:
Post a Comment
Terimakasih Anda telah silaturakhim keblog ini dengan misi didaktik metodik pembelajaran di SMK, sehingga setiap saat dapat berubah sesuai kompetensi Pembelajaran. Silahkan berikan komentar yang sangat berharga demi kemajuan blog ini. Sehubungan dengan hak cipta apabila ada konten Anda disini dengan rendah hati saya mohon ijin memuatnya dan jika tidak berkenan mohon konfirmasinya, Mari berbagi untuk info yang manfaat dan belajar sepanjang hayat, salam sukses buat Anda dan keluarga!!! Klik gambar emoticon berikut jika Anda ingin menggunakannya.