Cambiando el diseño de las barras de scroll con CSS
Una de las recomendaciones fundamentales para una buena usabilidad es no modificar en exceso el diseño de los elementos que forman parte de la interfaz de usuario del sistema operativo, tales como botones, elementos <select>, las barras de scroll, etc. Hacerlo complica el u...
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 ...
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" ...
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. G...
Cómo evitar que tus archivos JavaScript y CSS sean manipulados
Las versiones más modernas de los mejores navegadores incluyen una funcionalidad para que los sitios web puedan controlar cómo se carga su código JavaScript y así evitar que sea modificado por usuarios maliciosos. Esta nueva funcionalidad, llamada "Integridad de Recursos&quo...
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 ...
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 ...
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 ...
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» e...
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 experi...