Artículos y tips sobre HTML5

Hacer un pie fijo en la parte inferior de la pantalla

2020-10-28T16:03:33+01:0017/12/2012|Diseño web, HTML5|

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: [...]

Canvas HTML5: Intersecciones (globalCompositeOperation)

2018-08-29T09:13:43+01:0004/12/2012|Diseño web, HTML5|

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 [...]

Canvas HTML5: animaciones II: setAnimationRequest

2019-12-29T13:07:07+01:0031/10/2012|Diseño web, HTML5|

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 [...]

Canvas HTML5: animaciones I

2019-12-29T13:10:00+01:0016/10/2012|Diseño web, HTML5|

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 [...]

Imágenes con reflejo con CSS3

2020-12-05T17:01:32+01:0027/09/2012|Diseño web, HTML5|

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, [...]

Sombra a elementos con CSS3

2018-08-29T09:18:40+01:0004/09/2012|Diseño web, HTML5|

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 [...]

Adapta tu web a pantallas Retina y otras de alta resolución

2020-10-28T16:38:47+01:0003/09/2012|Diseño web, HTML5|

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 [...]

Ultimate Useless Machine en Css parte 4: ¡Ya funciona!

2020-12-05T17:30:52+01:0017/08/2012|Diseño web, HTML5|

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 [...]

Ultimate Useless Machine en Css parte 3

2020-12-06T11:12:53+01:0010/08/2012|Diseño web, HTML5|

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 [...]

Ir a Arriba