Buscador de Google ingrávido

Ricardo Cabello, tambien conocido como Mr. Doob, es un desarrollador - diseñador web barcelones y es el creador de este 'Google search modificado', entre otros muchos trabajos. Como podeis observar, parece que en este buscador la gravedad brilla por su ausencia. Tanto el logo como el formulario y los botones van flotando 'a su bola', y tamien, si queremos podemos moverlos a nuestro antojo con el cursor del raton. Ademas funciona, si pruebas a hacer una busqueda te apareceran los correspondientes resultados, eso si, desperdigados por todo el formulario.

leer articulo ➨

Origami canvas

El arte del plegado de papel japones llamado Origami, es la base de este bonito experimento interactivo realizado con HTML5 por el diseñador de la web Hakim.se. Si haces click en los papelitos de colores, estos iran cambiandose en conjunto, formando diferentes figuras y animaciones.

descargar el codigo

leer articulo ➨

Peces animados con Javascript y CSS3

El joven diseñador web Adam Drago es el realizador de esta simpatica animacion. Para ello, ha utilizado 2 imagenes de los peces, Javascript y CSS3 para el fondo, las burbujas y las animaciones.

ver/descargar el codigo

leer articulo ➨

Muro de colores con bola ectoplastica

Si, ya se que el titulo es un poco rarito, pero mirad este experimento realizado con HTML5 y lo entendereis. Esta basado en un codigo realizado por un autor anonimo en el que se proyecta una 'pared' de cuadraditos de colores. Sobre este muro aparece una gran bola con un efecto 'metal liquido' como el malo de Terminator 2, que al mover el cursor por la pantalla, esta se desplaza tambien en varias direcciones.

ver el codigo utilizado

<canvas id="canvas"></canvas>
<script> var THRESHOLD = 0.1,     FPS = 30; var canvas, context, stageWidth, stageHeight, space, maxDist,     mouseX = 0,     mouseY = 0,     point = [],     points = []; $(document).ready(init); init(); function init() {   canvas = document.getElementById('canvas');   context = canvas.getContext('2d');   resize();   $(window).resize(resize); $(window).mousemove(function(event) {   mouseX = event.pageX;   mouseY = event.pageY; }); setInterval(onEnterFrame, 1000 / FPS); } function resize() { stageWidth = $(window).width(); stageHeight = $(window).height();   mouseX = stageWidth * 0.5;   mouseY = stageHeight * 0.5; canvas.width = stageWidth; canvas.height = stageHeight; space = Math.ceil(stageHeight / 18); maxDist = Math.ceil(space * 8); generate(); } function generate() { point = []; var wd = Math.ceil(stageWidth / space); var ht = Math.ceil(stageHeight / space); var layout = []; for(var w = 0; w <= wd; w++) {   layout[w] = [];      for(var h = 0; h <= ht; h++) {    var p = {};    p.x = p.ox = space * w;    p.y = p.oy = space * h;       point[point.length] = p;       layout[w][h] = p;   } } points = []; for(var i = 0; i < layout.length-1; i++) {   var l2 = layout[i].length-1;   for(var i2 = 0; i2 < l2; i2++) {    var p = {};    p.tl = layout[i][i2];    p.tr = layout[i][i2+1];    p.br = layout[i+1][i2+1];    p.bl = layout[i+1][i2];    p.color = "#"+((1<<24)*Math.random()|0).toString(16);    points[points.length] = p;   } } } function onEnterFrame() { var j = point.length; while(--j > -1) {   update(point[j]); } render(); } function update(p) { var easing; var dx = mouseX - p.ox; var dy = mouseY - p.oy; var dist = Math.sqrt(dx * dx + dy * dy);   if(dist == 0 || (dist > maxDist && p.x == p.ox && p.y == p.oy)) {     return;   } var tx; var ty; if(dist <= maxDist) {   var ratio = dy / dist;   var ang = Math.asin(ratio) * 180 / Math.PI;      if(mouseX < p.ox) ang = 180 - ang;      ang = 270 - ang;      var sin = Math.sin(ang / 180 * Math.PI);   var cos = Math.cos(ang / 180 * Math.PI);   var radius = maxDist - ((maxDist / dist - 1) * 8);   radius = Math.max(maxDist * .25, radius);      tx = mouseX + (sin * radius);   ty = mouseY + (cos * radius);      easing = .35; } else {   tx = p.ox;   ty = p.oy;   easing = .1; } if(p.x != tx) {   var vx = (tx - p.x) * easing;   p.x += vx; } if(p.y != ty) {   var vy = (ty - p.y) * easing;   p.y += vy; } if(Math.abs(p.x - tx) < THRESHOLD) {   p.x = tx; } if(Math.abs(p.y - ty) < THRESHOLD) {   p.y = ty; } } function render() { context.clearRect(0, 0, stageWidth, stageHeight); var i = points.length; while(--i > -1) {   context.fillStyle = points[i].color;   context.beginPath();   context.moveTo(points[i].tl.x, points[i].tl.y);   context.lineTo(points[i].tr.x, points[i].tr.y);   context.lineTo(points[i].br.x, points[i].br.y);   context.lineTo(points[i].bl.x, points[i].bl.y);   context.lineTo(points[i].tl.x, points[i].tl.y);   context.closePath();   context.fill(); } } </script>
<style> canvas {   cursor: pointer;width:630px;height:400px; } </style>

leer articulo ➨

Hover con movimiento en plano vertical 3D

Experimentando un poquillo con CSS3, me ha salido un interactivo efecto activable, creando asi la ilusion de movimiento vertical de un plano en el espacio 3D. Si lo que os acabo de contar os suena a conchinchino, basta con que veais el ejemplo de demostracion. De momento, aunque se ve en Firefox, esta animacion se aprecia mejor en Chrome y Opera.

Pasa el cursor por encima para ver el efecto.

1

2

3

ver el codigo utilizado

<div id="contenedorp">

<div class="objeto"><div class="hoverplano3d">1</div>
<div class="sombra"></div></div>

<div class="objeto"><div class="hoverplano3d">2</div>
<div class="sombra"></div></div>

<div class="objeto"><div class="hoverplano3d">3</div>
<div class="sombra"></div></div>

</div>

<style>
#contenedorp{
    height: 300px;
    width: 630px;
    margin: 30px auto;
    -webkit-perspective: 600;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective: 600;
    -moz-perspective-origin: 50% 50%;position: relative;
}
.objeto{
    padding: 0 50px;
    float: left;
    width: 100px;
    height: 300px;cursor:pointer;
}
.hoverplano3d{
        -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
    position: absolute;
    top: 0;
    z-index: 2;
    width: 100px;
    height: 100px;
    border: solid 5px #F90;
    text-align: center;
    color: #fff;
    line-height: 100px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 50pt;
    -webkit-transform: rotateX(-75deg);
    -webkit-transition: all .75s ease-out;
    -moz-transform: rotateX(-75deg);
    -moz-transition: all .75s ease-out;
        background: #b3dced;
background: -moz-linear-gradient(-45deg,  #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee));
background: -webkit-linear-gradient(-45deg,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: -o-linear-gradient(-45deg,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: -ms-linear-gradient(-45deg,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: linear-gradient(135deg,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=1 );

}
.objeto:hover .hoverplano3d{
    top: 150px;
    -webkit-transform: rotateX(-100deg);
    -moz-transform: rotateX(-100deg);
}
.sombra{
    position: absolute;
    top: 150px;
    z-index: 1;
    width: 110px;
    height: 110px;
    background-color: rgba(0,0,0,0.2);
    -webkit-transform: rotateX(-100deg);
    -webkit-transition: all .75s ease-out;
    -webkit-box-shadow: 0 0 40px rgba(0,0,0,0.2);
    -moz-transform: rotateX(-100deg);
    -moz-transition: all .75s ease-out;
    -moz-box-shadow: 0 0 40px rgba(0,0,0,0.2);
        -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
.objeto:hover .sombra{
    background-color: rgba(0,0,0,0.8);
    -webkit-box-shadow: 0 0 0 rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 0 rgba(0,0,0,0.8);
}
</style>

leer articulo ➨

Efectos diamante con la etiqueta canvas

Basandome en un experimento visto en una web de diseño, he estado probando un poco con la etiqueta 'canvas' (canvas es un elemento HTML incorporado en HTML5 que permite la generacion de graficos dinamicamente y animaciones por medio del scripting) y el resultado ha sido este que veis. Son como particulas invisibles conectadas con lineas de colores que aparecen y desaparecen formando un efecto acristalado o de diamante.

Este es el codigo utilizado en su realizacion:

<center><canvas id="canvas"></canvas></center>

<style>
#canvas {
 display: block;background: #000;width:600px;height:450px;
}</style>

<script type="text/javascript">
 window.onload = function(){
 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");

 var W = window.innerWidth, H = window.innerHeight;
 canvas.width = W;
 canvas.height = H;

 var particles = [];
 for(var i = 0; i < 25; i++)
 {
  particles.push(new particle());
 }

 function particle()
 {
  this.location = {x: Math.random()*W, y: Math.random()*H};
  this.radius = 0;
  this.speed = 3;
  this.angle = Math.random()*360;
  var r = Math.round(Math.random()*255);
  var g = Math.round(Math.random()*255);
  var b = Math.round(Math.random()*255);
  var a = Math.random();
  this.rgba = "rgba("+r+", "+g+", "+b+", "+a+")";
 }
 function draw()
 {
  ctx.globalCompositeOperation = "source-over";
  ctx.fillStyle = "rgba(0, 0, 0, 0.02)";
  ctx.fillRect(0, 0, W, H);
  ctx.globalCompositeOperation = "lighter";
 
  for(var i = 0; i < particles.length; i++)
  {
   var p = particles[i];
   ctx.fillStyle = "white";
   ctx.fillRect(p.location.x, p.location.y, p.radius, p.radius);
   for(var n = 0; n < particles.length; n++)
   {
    var p2 = particles[n];
    var yd = p2.location.y - p.location.y;
    var xd = p2.location.x - p.location.x;
    var distance = Math.sqrt(xd*xd + yd*yd);
    if(distance < 200)
    {
     ctx.beginPath();
     ctx.lineWidth = 1;
     ctx.moveTo(p.location.x, p.location.y);
     ctx.lineTo(p2.location.x, p2.location.y);
     ctx.strokeStyle = p.rgba;
     ctx.stroke();
    }
   }
   p.location.x = p.location.x + p.speed*Math.cos(p.angle*Math.PI/180);
   p.location.y = p.location.y + p.speed*Math.sin(p.angle*Math.PI/180);
   if(p.location.x < 0) p.location.x = W;
   if(p.location.x > W) p.location.x = 0;
   if(p.location.y < 0) p.location.y = H;
   if(p.location.y > H) p.location.y = 0;
  }
 }

 setInterval(draw, 30);
}
</script>

leer articulo ➨

Canvas gradiente interactivo

¿Que es Canvas? Es un (relativamente) nuevo elemento HTML que es usado para realizar graficos dinamicamente por medio de scripts (tales como javascript), graficos estáticos y simples animaciones, entre otras cosas. Digamos en otras palabras que el elemento <canvas> de HTML5 es la solucion para dibujar imágenes e integrarlas perfectamente en el documento, dandole estilo por medio de CSS y programandolas por medio de Javascript (para tener algun tipo de animacion). Es un lenguaje que no domino mucho, pero con el cual se pueden realizar maravillas en el diseño web. Como este pequeño experimento que veis aqui, un rectangulo con colores gradientes que al pasar el cursor sobre el, van cambiando dando un efecto muy chulo.

Y aqui esta el codigo que he utilizado para su realizacion:

<div style="-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;background-color:#DFDFDF;border:1px solid #555555;"><center><canvas></canvas></center></div>

<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, 600, 600);
  ctx.save();
  // Create radial gradient
  grad = ctx.createRadialGradient(0,0,0,0,0,600);
  grad.addColorStop(0, '#000');
  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 / height;
       
    var xc = ~~(256 * x / width);
    var yc = ~~(256 * y / height);

    grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
    grad.addColorStop(0, '#000');
    grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
    // ctx.restore();
    ctx.fillStyle = grad;
    ctx.fillRect(0,0,600,600);
    // ctx.save();
  };
}
</script>

<style>
canvas {
position: relative;
  height: 450px;
  width: 600px; 
}
</style>

leer articulo ➨

El monstruo 'tragacursores'

Muy original este monstruito que al pasar el cursor del raton sobre el, este lo sigue con la mirada hasta que se lo traga literalmente. Esta genial creacion, realizada por un joven diseñador web llamado Simurai, esta confeccionado con Javascript y CSS3. El monstruo azul esta integramente realizado con CSS, es decir, no contiene ningun tipo de imagen.

Si quereis ver el codigo empleado para su realizacion, haced click sobre el boton:

ver/ocultar codigo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://hostredeando.ucoz.es/SCRIPTS/monster/engin.js"></script>

<div id="cont" class="sleep"><center><div id="monster"><div class="eye">
<div class="lid"></div></div><div class="eye"><div class="lid"></div></div><div id="mouth"></div></div></center></div>


<style>

#cont{
 z-index: 11;
 position: absolute;
        top: 50%;
 left: 50%;
     -webkit-transition: -webkit-transform .3s cubic-bezier(.1, 0, 0, 1);
    -moz-transition:    -moz-transform .3s cubic-bezier(.1, 0, 0, 1);
   -o-transition:   -o-transform .3s cubic-bezier(.1, 0, 0, 1);
   transition:   transform .3s cubic-bezier(.1, 0, 0, 1);
}
#cont:after { /* shadow */
 content: "";
 z-index: -1;
 position: absolute;
 width: 100px; height: 100px;
 margin-left: -50px;
 border-radius: 50px;

 -webkit-box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px;
    -moz-box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px;
   -o-box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px;
   box-shadow: hsla(210,0%,0%,.8) 0 200px 100px 1px;

 -webkit-transform: translateY(-160px) scale(1.4, .5);
    -moz-transform: translate( -50px, -160px) scale(1.2, .5);
   -o-transform: translateY(-160px) scale(1.4, .5);
   transform: translateY(-160px) scale(1.4, .5);
}




#monster {
 z-index: 1;
 position: relative;
 width: 200px;
 height: 240px;
 margin: -120px 0 0 -100px;
 border-radius: 100px 100px 50px 50px / 160px 160px 80px 80px;

 text-align: center;

 background-color: #5e97ed;

 background-image: -webkit-gradient(radial, 50% 8%, 0, 50% 40%, 120,
      color-stop( 0, rgba(255,255,255,.8) ),
      color-stop(.8, rgba(255,255,255, 0) ),
      color-stop(.8, rgba(0,0,0, 0) ),
      color-stop( 1, rgba(0,0,0,.33) )),
      url(noise.png);
 background-image: -moz-radial-gradient(50% 21% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png);
 background-image:   -o-radial-gradient(50% 21% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png);
 background-image:     radial-gradient(50% 21% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png);


 -webkit-box-shadow: inset rgba(0,0,0,.5) 0 -10px 50px;
    -moz-box-shadow: inset rgba(0,0,0,.5) 0 -10px 50px;
   -o-box-shadow: inset rgba(0,0,0,.5) 0 -10px 50px;
   box-shadow: inset rgba(0,0,0,.5) 0 -10px 50px;

 -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
   -o-transform-origin: bottom;
   transform-origin: bottom;

 -webkit-box-reflect: below -3px -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100,
         color-stop(0.6, rgba(0,0,0,.2) ), to( transparent ));

 -webkit-transform: scale3d(1, 1, 1); /* fixes the reflection after scaling */

 -webkit-transition: background-color .5s ease-out;
    -moz-transition: background-color .5s ease-out;
   -o-transition: background-color .5s ease-out;
   transition: background-color .5s ease-out;
}





/* ---------------------------- ojos ---------------------------- */


#monster .eye:first-child {
 -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
   -o-transform: scale(0.6);
   transform: scale(0.6);
}

.eye {
 position: relative;
 width: 60px;
 height: 40px;
 margin: 0px auto 5px auto;

 top: 15%;

 border-radius: 60px / 40px;

 background-color: #eee;

 -webkit-box-shadow: inset rgba(0,0,0,.4) 0 -1px 3px 1px, inset rgba(0,0,0,.5) 0 -5px 20px,  rgba(0,0,0,.5) 0 -5px 10px, rgba(255,255,255,.5) 0 5px 10px;
    -moz-box-shadow: inset rgba(0,0,0,.4) 0 -1px 3px 1px, inset rgba(0,0,0,.5) 0 -5px 20px,  rgba(0,0,0,.5) 0 -5px 10px, rgba(255,255,255,.5) 0 5px 10px;
   -o-box-shadow: inset rgba(0,0,0,.4) 0 -1px 3px 1px, inset rgba(0,0,0,.5) 0 -5px 20px,  rgba(0,0,0,.5) 0 -5px 10px, rgba(255,255,255,.5) 0 5px 10px;
   box-shadow: inset rgba(0,0,0,.4) 0 -1px 3px 1px, inset rgba(0,0,0,.5) 0 -5px 20px,  rgba(0,0,0,.5) 0 -5px 10px, rgba(255,255,255,.5) 0 5px 10px;
 
 background-repeat: no-repeat;
    
 background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 40,
      color-stop(.12, rgba(0,0,0,1) ),
      color-stop(.22, hsl(190,50%,50%) ),
      color-stop(.4, hsl(200,50%,30%) ),
      color-stop(.5, rgba(255,255,255,0) )
      );
 background-image: -moz-radial-gradient(50% 50% 0deg, circle, rgba(0,0,0,1) 12%, hsl(190,50%,50%) 22%, hsl(200,50%,30%) 40%, rgba(255,255,255,0) 50% );
 background-image:   -o-radial-gradient(50% 50% 0deg, circle, rgba(0,0,0,1) 12%, hsl(190,50%,50%) 22%, hsl(200,50%,30%) 40%, rgba(255,255,255,0) 50% );
 background-image:     radial-gradient(50% 50% 0deg, circle, rgba(0,0,0,1) 12%, hsl(190,50%,50%) 22%, hsl(200,50%,30%) 40%, rgba(255,255,255,0) 50% );

}
.eye:before { /* highlight */
 content: "";
 position: absolute;
 top: 20%;
 left: 32%;
 border-radius: 5px;
 width: 10px; height: 10px;
 background-color: #fff;

 -webkit-transform: skewX(-10deg);
    -moz-transform: skewX(-10deg);
   -o-transform: skewX(-10deg);
   transform: skewX(-10deg);
}

.eye .lid {
 position: absolute;
 border-radius: inherit;
 width: inherit; height: inherit;

 background-color: rgba(94,151,237,0.8);
 -webkit-box-shadow: inset rgba(0,0,0,.2) 0 -1px 3px 1px, inset rgba(0,0,0,.5) 0 -5px 20px, rgba(0,0,0,.6) 0 1px 2px;

 background-image: -webkit-gradient(radial, 50% 10%, 0, 50% 30%, 40,
      color-stop( 0, rgba(255,255,255,.8) ),
      color-stop(.8, rgba(255,255,255, 0) ),
      color-stop(.8, rgba(0,0,0, 0) ),
      color-stop( 1, rgba(0,0,0,.33) )),
      url(noise.png);
 background-image: -moz-radial-gradient(50% 20% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png);
 background-image:   -o-radial-gradient(50% 20% 0deg, rgba(255,255,255,.8) 0%, rgba(255,255,255, 0) 80%, rgba(0,0,0, 0) 80%, rgba(0,0,0,.33) 100% ), url(noise.png);


 
   -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 0px 0px;
   -webkit-mask-image: -webkit-gradient(radial, 50% 120%, 20, 50% 120%, 50,
        color-stop(.5, rgba(0,0,0,0)),
        color-stop(.6, rgba(0,0,0,1))
        );
    -webkit-transform: translate3d(0,0,0); /* fixes a render bug */
  
}



/* ---------------------------- boca ---------------------------- */


#mouth {
 position: relative;
 width: 100px;
 height: 20px;

 margin: 0 auto;
 top: 25%;
 overflow: hidden;

 border-radius: 100px 100px 50px 50px / 60px 60px 80px 80px;

 background-color: #111;

 -webkit-box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px, rgba(0,0,0,.7) 0 -5px 10px, rgba(255,255,255,.7) 0 5px 10px;
    -moz-box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px, rgba(0,0,0,.7) 0 -5px 10px, rgba(255,255,255,.7) 0 5px 10px;
   -o-box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px, rgba(0,0,0,.7) 0 -5px 10px, rgba(255,255,255,.7) 0 5px 10px;
   box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px, rgba(0,0,0,.7) 0 -5px 10px, rgba(255,255,255,.7) 0 5px 10px;


 /* tongue */
 background-repeat: no-repeat;
 background-position: center 85%;

 -webkit-background-size: 100px;
    -moz-background-size: 100px;
   -o-background-size: 100px;
   background-size: 100px;

 background-image: -webkit-gradient(radial, 62% 100%, 0, 62% 100%, 50,
     color-stop(.3, rgba(255,0,0,1) ),
     color-stop(.5, rgba(255,0,0,0) )),
     -webkit-gradient(radial, 38% 100%, 0, 38% 100%, 50,
     color-stop(.3, rgba(255,0,0,1) ),
     color-stop(.5, rgba(255,0,0,0) ));
 background-image: -moz-radial-gradient(62% 100% 0deg, rgba(255,0,0,1) 10%, rgba(255,0,0,0) 30% ), -moz-radial-gradient(38% 100% 0deg, rgba(255,0,0,1) 10%, rgba(255,0,0,0) 30% );
 background-image:   -o-radial-gradient(62% 100% 0deg, rgba(255,0,0,1) 10%, rgba(255,0,0,0) 30% ),   -o-radial-gradient(38% 100% 0deg, rgba(255,0,0,1) 10%, rgba(255,0,0,0) 30% );


}

#mouth:before { /* teeth */
 content: "";
 position: absolute;
 top: 0; left: 0; right: 0;
 width: 30px; height: 10px;
 margin: 0 auto;
 border-radius: 0px 0px 4px 4px;

 background-color: #fff9e4;

 -webkit-background-size: 50%;
    -moz-background-size: 50%;
   -o-background-size: 50%;
   background-size: 50%;

 background-image: -webkit-gradient(linear, 0% 0%, 100% 0%,
     color-stop(0, rgba(0,0,0,.4) ),
     color-stop(.1, rgba(0,0,0,0) ),
     color-stop(.9, rgba(0,0,0,0) ),
     color-stop(1, rgba(0,0,0,.4) )
     );
 background-image: -moz-linear-gradient(left, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.4) 100% );
 background-image:   -o-linear-gradient(left, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.4) 100% );
 background-image:     linear-gradient(left, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,.4) 100% );

 -webkit-box-shadow: inset rgba(0,0,0,.8) 0 2px 5px 1px;
    -moz-box-shadow: inset rgba(0,0,0,.8) 0 2px 5px 1px;
   -o-box-shadow: inset rgba(0,0,0,.8) 0 2px 5px 1px;
   box-shadow: inset rgba(0,0,0,.8) 0 2px 5px 1px;

 -webkit-transform: perspective(50) translate3d(0,0,5px) rotateX(-40deg)  ;
}


/* ---------------------------- states ---------------------------- */

/* sleep */
.sleep .eye {
   background-position: 0 -40px;
}
.sleep .lid {
   -webkit-mask-image: -webkit-gradient(radial, 50% 200%, 20, 50% 200%, 50, color-stop(.5, rgba(0,0,0,0)), color-stop(.6, rgba(0,0,0,1)) );
}
.sleep #mouth {
 height: 50px;
 background-position: center bottom;
 -webkit-animation: sleep-mouth 2.5s 0 infinite alternate cubic-bezier(.3, 0, .5, 1);
}
.sleep #monster {
 -webkit-animation: sleep-monster 2.5s 0 infinite alternate cubic-bezier(.5, 0, .3, 1);
}



/* hungry */
.hungry #mouth.out {
 -webkit-transition: height .4s cubic-bezier(0, 0.6, 0.2, 1);
    -moz-transition: height .4s cubic-bezier(0, 0.6, 0.2, 1);
}
.hungry .lid {
 -moz-transform: scaleY(0); /* hide for browsers without mask-image */
    -o-transform:  scaleY(0); /* hide for browsers without mask-image */
}
.hungry #monster {
   -webkit-animation: hungry-monster .3s 0 1 cubic-bezier(.4, .1, .2, 1);
      -moz-animation: hungry-monster .3s 1 cubic-bezier(.4, .1, .2, 1);
}


/* eat */
.eat #monster {
 background-color: #f932a5;
   -webkit-animation:  eat-swallow-monster .3s 0 1 cubic-bezier(.4, .1, .2, 1),
        eat-monster .6s .3s infinite alternate cubic-bezier(.5, .1, .5, .9);
      -moz-animation:  eat-swallow-monster .3s 1 cubic-bezier(.4, .1, .2, 1),
        eat-monster .6s .4s infinite alternate cubic-bezier(.5, .1, .5, .9);
}
.eat .eye:first-child {
   -webkit-animation: eat-eye-first .6s 0 infinite cubic-bezier(0, .6, 1, .4);
      -moz-animation: eat-eye-first .6s infinite cubic-bezier(0, .6, 1, .4);
}
.eat .eye:nth-child(2) {
   -webkit-animation: eat-eye-second .6s 0 infinite cubic-bezier(0, .6, 1, .4);
      -moz-animation: eat-eye-second .6s infinite cubic-bezier(0, .6, 1, .4);
}

.eat .lid {
   display: none;
}
.eat #mouth {
 height: 2px;
 border-radius: 0px 0px 500px 500px / 0px 0px 60px 60px;
 -webkit-box-shadow: inset rgba(0,0,0,.7) 0 -2px 10px 1px,
      rgba(0,0,0,.7) 0 -2px 10px 2px, rgba(255,255,255,.7) 0 2px 6px 2px;

 background-position: center 0px;
 -webkit-animation: eat-mouth .2s 0 infinite alternate cubic-bezier(.5, .1, .5, .9);
    -moz-animation: eat-mouth .2s infinite alternate cubic-bezier(.5, .1, .5, .9);
}
.eat #mouth:before {
 display: none;
}
#wrapper.eat {
 -webkit-transform: scale3d(1.08, 1.08, 1);
    -moz-transform: scale(1.08, 1.08);
   -o-transform: scale(1.08, 1.08);
   transform: scale(1.08, 1.08);

 -webkit-transition: -webkit-transform .1s cubic-bezier(.1, .3, 0, 1);
    -moz-transition:    -moz-transform .1s cubic-bezier(.1, .3, 0, 1);
   -o-transition:   -o-transform .1s cubic-bezier(.1, .3, 0, 1);
   transition:   transform .1s cubic-bezier(.1, .3, 0, 1);
}



/* ---------------------------- animation webkit ---------------------------- */

/* sleep */
@-webkit-keyframes sleep-mouth { 0% {}
 100% { -webkit-transform: scale3d(1.04, 1.05, 1); }
}
@-webkit-keyframes sleep-monster { 0% {}
    100% { -webkit-transform: scale3d(1.08, .92, 1); }
}

/* hungry */
@-webkit-keyframes hungry-monster { 0% {}
     20% { -webkit-transform: scale3d(.8, 1.1, 1); }
    100% { -webkit-transform: scale3d( 1,   1, 1); }
}

/* eat */
@-webkit-keyframes eat-swallow-monster { 0% {}
     20% { -webkit-transform: scale3d(1.2, .9, 1); }
    100% { -webkit-transform: scale3d(1,    1, 1); }
}
@-webkit-keyframes eat-monster { 0% {}
 100% { -webkit-transform: scale3d(1.02, .98, 1); }
}
@-webkit-keyframes eat-mouth {
 0% { -webkit-transform: translateY(10px); }
 100% { -webkit-transform: translateY(15px) scale3d(0.9, 1.2, 1); }
}
@-webkit-keyframes eat-eye-first {
   0% {  background-position: 0 -60px; -webkit-transform: scale3d(.6,.6,1) translate3d(0,-5px,0);   }
 100% {  background-position: 0  60px; -webkit-transform: scale3d(.8,.8,1) translate3d(0, 5px,0);   }
}
@-webkit-keyframes eat-eye-second {
   0% {  background-position: 0  60px; -webkit-transform: scale3d(1,1,1) translate3d(0,0,0);   }
 100% {  background-position: 0 -60px; -webkit-transform: scale3d(.8,.8,1) translate3d(0,0,0);   }
}


/* ---------------------------- animation moz ---------------------------- */


/* hungry */
@-moz-keyframes hungry-monster { 0% {}
     20% { -moz-transform: scale(.8, 1.1); }
    100% { -moz-transform: scale( 1,   1); }
}

/* eat */
@-moz-keyframes eat-swallow-monster { 0% {}
     20% { -moz-transform: scale(1.2, .9); }
    100% { -moz-transform: scale(1,    1); }
}
@-moz-keyframes eat-monster { 0% {}
 100% { -moz-transform: scale(1.02, .98); }
}
@-moz-keyframes eat-mouth {
 0% { -moz-transform: translateY(10px); }
 100% { -moz-transform: translateY(15px) scale(0.9, 1.2); }
}
@-moz-keyframes eat-eye-first {
   0% {  background-position: 0 -60px; -moz-transform: scale(.6,.6) translate(0,-5px);   }
 100% {  background-position: 0  60px; -moz-transform: scale(.8,.8) translate(0, 5px);   }
}
@-moz-keyframes eat-eye-second {
   0% {  background-position: 0  60px; -moz-transform: scale(1,1); }
 100% {  background-position: 0 -60px; -moz-transform: scale(.8,.8); }
}
</style>

leer articulo ➨

Cronometro experimental

En esta seccion llamada 'Labs', como de costumbre, os suelo mostrar experimentos geniales de diseñadores y programadores. Esta vez se trata de una creacion de Leonid Lilo, a base de animaciones con CSS3, en la que como podeis apreciar se trata de un cronometro gigante. Si le dais al boton grande, se pone en marcha y se para, y con el mas pequeño de la izquierda se resetea a 0.

leer articulo ➨

Efecto metalico con HTML5

He aqui otro ejemplo de las posibilidades que nos da el HTML5 (HyperText Markup Language, versión 5). Un fondo blanco en el que, al pasar el raton dibujamos una composicion como de metal liquido.

leer articulo ➨

Eclipse Javascript

Situa el cursor del raton encima de el "espacio" y mueve la luna tapando y destapando el sol a modo de eclipse. Esto es otra muestra de lo que se puede llegar hacer con Javascript y HTML5, en este caso de la mano de un diseñador Español llamado Ricardo Cabello.

leer articulo ➨

Transformacion de cubos

Un diseñador web llamado Gerard Ferrandez ha creado estas fantasticas animaciones tridimensionales compuestas por HTML5 Canvas, CSS y Javascript. El codigo de realizacion es algo complicado y creo innecesario ponerlo aqui, sobre todo porque no os va a ser de utilidad para vuestra web o blog, mas que nada es un espectaculo visual. Coloca el cursor sobre el cubo en 3D y clickea sobre el, dale la vuelta para que rote y que se reproduzca en otros mas. Ademas, tienes varias opciones en la barra lateral, como cambiarle el fondo, darle transparencia, resetear, etc...

leer articulo ➨

Psicodelias verdiblancas

Los programadores de la web dhteumeuleu hacen cada cosa que me dejan 'flipado'. Por ejemplo, este psicodelico efecto que ellos denominan "The Momentum Equation", en el que al pasar el cursor se disparan como cometas abstractos de color verde y blanco en un fondo negro. Todo ello creado con HTML5, Javascript y CSS.

leer articulo ➨