Demo CSS3: Un diseño con medidas basadas en viewport

A estas alturas creo que ya todos debemos conocer la diferencia entre unidades de medida relativas y absolutas en CSS a la hora de especificar un tamaño de fuente para una página web: las unidades absolutas (por ejemplo, los píxeles, aunque también existen puntos, centímetros, pulgadas…normalmente usados solo en hojas de estilo para impresión) definen dimensiones […]

Archetype: una plantilla adaptativa para HTML5

arquetipo (Del lat. archety̆pus, y este del gr. ἀρχέτυπος). 1. m. Modelo original y primario en un arte u otra cosa. Como cualquier desarrollador front-end, cada vez que empiezo un nuevo sitio web me enfrento con el tedioso proceso de crear carpetas para estáticos, buscar la sintaxis exacta del Doctype, copiar las reglas para resetear la hoja de estilos… Afortunadamente, en […]

No olvides tu hoja de estilo CSS para impresión

Hacer una hoja de estilo para impresión es un detalle que a la hora de desarrollar una web, frecuentemente y por desgracia se pasa por alto. Sin embargo, es una de las cosas más sencillas y que mejor impresión (ja, ja) pueden dar al lector ocasional de tu página que por necesidad o comodidad decide […]

Cómo hacer tu CSS más eficiente con Opera Dragonfly

Opera ha creado una nueva funcionalidad en su debugger Dragonfly que permite depurar facilmente tus reglas de CSS y encontrar aquellas más ineficientes. Aunque en la actualidad los navegadores modernos renderizan CSS bastante rápido, aún hay reglas, como el selector universal (*) que consumen relativamente demasiados recursos. Aqui podemos ver los resultados que ofrece la […]

Google Maps responsivos

Insertar un mapa de Google dentro de un diseño responsivo es tan fácil como definir las dimensiones del iframe que contenga el mapa con escalas relativas (porcentajes o em), nunca absolutas (px). De este modo, el mapa se ajustará siempre al tamaño de la pantalla. Puedes ver este efecto en acción en la web de […]

Cómo modificar el estilo del Placeholder en formularios HTML5

El atributo placeholder se utiliza en los elementos input o textarea para mostrar un valor por defecto en un formulario, a forma de sugerencia o ejemplo. Antiguamente este efecto solamente se podía conseguir con Javascript, estableciendo un valor por defecto para el atributo value, borrándolo cuando el campo del formulario está activo (focus), y volviéndolo a […]