domingo, 27 de mayo de 2012

Codigo Script Code HTML en Blogger Blogspot con SYNTAX HIGHLIGHTER

.
Ejemplo de código script Htmlo en Blogger con SYNTAX HIGHLIGHTER.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Lechill Mobile</title>
<!-- <link href="../style.css" rel="stylesheet" type="text/css" /> -->

<style>

canvas 
{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index:-1
}

#container{
 height:580px;}

</style>
</head>

<body>

<canvas height="1000" width="1000"><p>Your browser doesn't support the HTML5 Canvas. Try using Firefox or Google Chrome</p></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,1000,1000);
  ctx.save();
  
  body.onmousemove = function (event) {
    var width = window.innerWidth, 
        height = window.innerHeight, 
        x = event.clientX, 
        y = event.clientY,
        rx = 1000 * x / width,
        ry = 1000 * y / width;
        
    var xc = ~~(256 * x / width);
    var yc = ~~(256 * y / height);
 
    grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 1000); 
    grad.addColorStop(0, '#fff');
    grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
    ctx.restore();
    ctx.fillStyle = grad;
    ctx.fillRect(0,0,1000,1000);
     ctx.save();
  };
}
</script> 

<div id="container" align="center">

<table border="0" cellspacing="0" cellpadding="0" align="center" width="800px">
<tr><td>
<img src="web2.png" width="800"/>
</td></tr>
</table>
</div>

</body>
</html>
.
¿Te fijaste que al principio del artículo hay una cosa que pone DISCLAIMER?. Pues si se te queman las tostadas por intentar poner en practica lo que dice este articulo o se te raya un CD de El Fary por leerlo no es culpa nuestra. Avisado quedas.
.

0 comentarios: