Artículos de diseño, desarrollo web, marketing digital y SEO
Canvas HTML5: animaciones I
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
Canvas HTML5: introducción
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
Imágenes con reflejo con CSS3
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
Sombra a elementos con CSS3
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
Adapta tu web a pantallas Retina y otras de alta resolución
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
Cambiando el color de selección con CSS: ::selection
Hay diseños web para los que se dedica mucho esfuerzo. Pero ese diseño queda muy bonito nada más cargar la página, pero se estropea ante acciones del usuario, como por ejemplo seleccionar un trozo de texto. Imaginemos una página con colores básicos
Ultimate Useless Machine en Css parte 4: ¡Ya funciona!
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
Ultimate Useless Machine en Css parte 3
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
Ultimate Useless Machine en Css parte 2
Esta es la segunda parte de cómo construir una máquina inútil en CSS. Podemos recordar lo que es una Useless Machine y qué habíamos hecho en la primera parte. Hasta ahora lo que teníamos es la máquina parada y con el botón de encender
Ultimate Useless Machine en Css parte 1
Desde hace tiempo circulan por internet vídeos y webs donde se venden Useless Machine, también conocidas como “Leave me alone box” o “Ultimate Machine”. Comencemos por un vídeo de una de ellas para saber como funciona. http://www.youtube.com/watch?v=KxaWvJ-ziXA
Texto Star Wars con transformaciones 3D y animación CSS3
#textoStarwars{ color: #ebe41c; font-size: 18px; width: 100%; -moz-transform-origin: 100px 200px; -moz-animation: movimientoTexto 10s linear infinite; -webkit-transform-origin: 100px 200px; -webkit-animation: movimientoTexto 10s linear infinite; -ms-transform-origin: 100px 200px; -ms-animation: movimientoTexto 10s linear infinite; transform-origin: 100px 200px; animation: movimientoTexto 10s linear infinite; } #contenedorTexto{ background:
Metadatos Open Graph
La mayoría de los que hacemos webs estamos acostumbrados a rellenar más o menos etiquetas de metadatos, con descripción, etiquetas,... Se ha desarrollado un protocolo que utiliza nuevos metadatos para crear grafos sociales, lo cual es muy útil en las redes sociales,