Un caso bastante habitual es que queramos que el pie de página quede fijo en la parte de abajo de la pantalla, como una barra de estado, independientemente del scroll y contenido de la misma. Esto no es muy difícil de conseguir usando CSS: #footer{ position: fixed; bottom: 0; width: 100%; height: 32px; padding-bottom: 16px; background:
Una vez que hemos visto como hacer animaciones sencillas con el elemento canvas, vamos a volver a las propiedades de dibujo que nos ofrece. En esta entrada vamos a ver cómo podemos elegir la operación de intersección entre objetos. Es un valor global del contexto así que afectará a las operaciones de intersección siguientes, por lo
En la última entrada sobre animación en el canvas veíamos cómo hacer una animación usando setTimeout. Es un método poco eficiente, y en el que tenemos que elegir a priori el espaciado entre cada paso de la animación. Se ha añadido en HTML5 un método javascript que se encarga automáticamente de llamar a un método que
En el artículo anterior vimos como usar el canvas para dibujar figuras sencillas. Se pueden hacer dibujos mucho más complejos, pero la gran utilidad del canvas es hacer animaciones, así que vamos a ver las bases de la animación en canvas. Necesitamos una función de pintado que se llame sucesivamente para ir pintando cada frame de
Vamos a comenzar una serie de artículos sobre el elemento canvas de HTML5. Es uno de las novedades que se anunciaron desde el principio con las novedades de HTML5. Es como una pizarra sobre la que hacer dibujos, y hay quien lo vende como el sustituto natural a las animaciones en flash. Podemos ver el canvas
Esta especificación es exclusiva de Webkit, no de la W3C, y ahora mismo solo lo soportan navegadores Webkit (Chrome, Safari, IOS, Android y Blackberry). Supone un método para hacer que un elemento aparezca reflejado debajo, encima o a un lado del elemento original. Tal vez donde mejor veamos el efecto sea en una imagen,
Durante mucho tiempo se han usado (y se siguen usando) imágenes para simular sombreado de los diferentes elementos de una página web, así parece que están por encima del fondo, da profundidad a la web. Actualmente se pueden realizar muchos efectos de sombreado directamente en CSS3, con box-shadow. Es una propiedad que funciona en todas las
Los nuevos productos de Apple tienen una gran densidad de píxeles, o lo que es lo mismo una alta resolución por espacio físico. Le dieron el nombre comercial de Retina, ya que anunciaron que sus pantallas ya tenían el número suficiente de píxeles por unidad de superficie para que el ojo humano no pudiera
En el artículo anterior sobre useless machine de la serie de artículos sobre la máquina inútil activábamos transformaciones con la pseudoclase css :active del interruptor. Para llegar a los demás elementos usábamos selectores de adyacencia. He comprobado que la doble adyacencia no funcionaba bien en Chrome y he cambiado el código usando el selector de hermano
En el artículo de Ultimate Useless Machine en Css parte 2 la Useless Machine ya tenía las transformaciones necesarias para las posiciones de encendido y apagado. Vamos a usar las pseudoclases CSS para poder accionar la máquina. Queremos que funcione al hacer click sobre el interruptor. Por lo tanto los cambios que queramos tienen que estar
