Tutoriales sobre diseño

Cómo controlar la forma en la que se cargan las fuentes web

Si tu sitio o aplicación web utiliza fuentes web, controlar cómo se cargan puede ser muy importante para mejorar el rendimiento percibido por tus usuarios. La nueva propiedad font-display disponible para @font-face permite a los diseñadores controlar cómo se muestra el sitio web en función de cuánto...

Cómo crear tooltips modernos solamente con CSS

Los tooltips son los "globos de ayuda" que aparecen al posicionar el ratón sobre un determinado elemento. Últimamente se están poniendo de moda en el diseño web porque permiten añadir mucha información útil a un sitio o aplicación web sin tener que "ensuciar" demasiado la interfa...

Cómo usar las nuevas variables CSS

Las variables CSS, técnicamente llamadas "propiedades CSS no estándar", simplifican tus archivos CSS y permiten crear efectos tan interesantes como cambiar dinámicamente los estilos aplicados en una página y mejorar las características de las propiedades CSS estándar. Google Chrome era el ...

Cómo detectar las funcionalidades de tu navegador con Feature.js

Los principales navegadores publican nuevas versiones continuamente. Por eso resulta casi imposible saber de manera actualizada qué funcionalidades soporta cada versión de cada navegador. Cuando desarrollas tu sitio o aplicación web, puedes consultar Can I Use.com para conocer qué funcionalidades ti...

Cómo mostrar imágenes pixeladas con CSS 3

Las imágenes son una de las partes más importantes del diseño web. Normalmente dejamos que sean los navegadores los que redimensionen y escalen las imágenes para que encajen bien en el diseño y se vean lo mejor posible. No obstante, en ocasiones es mejor controlar explícitamente cómo se escalan las ...

El nuevo elemento <picture> de HTML5 para crear imágenes responsive

El nuevo elemento <picture> de HTML5 permite describir con todo detalle cómo deben cargarse las imágenes de tu sitio web. Ya no serán necesarios los hacks de CSS o JavaScript para gestionar las imágenes responsive de los diseños web. Además, los usuarios se aprovecharán de las ventajas de carg...

El nuevo elemento <picture> de HTML5 para crear imágenes responsive

El nuevo elemento <picture> de HTML5 permite describir con todo detalle cómo deben cargarse las imágenes de tu sitio web. Ya no serán necesarios los hacks de CSS o JavaScript para gestionar las imágenes responsive de los diseños web. Además, los usuarios se aprovecharán de las ventajas de carg...

Cómo conseguir que el texto de tus sitios web se vea igual en Mac OS, Windows y Linux

Una de las preguntas más habituales que surgen al comprobar tus sitios web en diferentes sistemas operativos es ¿Por qué se ve tan diferente el texto en Mac OS, Windows y Linux? De hecho es posible que más de una vez te hayan preguntado "¿por qué se ve la letra «tan gorda» en Mac OS comparada c...

El proceso de rediseño de LibrosWeb.es

Hace unas semanas presentamos el nuevo rediseño del sitio web librosweb.es. En este artículo explico cómo fue el proceso que seguí para la actualización, tanto desde el punto de vista técnico como del diseño. Mi propósito no es dar lecciones de nada a nadie, sino contar mi experiencia por si te pued...

Las novedades de Firefox 29 para programadores y diseñadores web

Firefox 29, la versión más esperada en mucho tiempo del popular navegador Firefox, se publicó el 29 de marzo de 2014. Aunque los cambios más radicales afectan a los usuarios finales del navegador, esta nueva versión también incluye novedades muy interesantes para diseñadores y programadores web. En ...