Tutoriales sobre css

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 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" (en inglés, "...

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

Creando fácilmente imágenes de relleno para tus prototipos

Al crear prototipos o wireframes de sitios y aplicaciones web, es habitual incluir contenidos de relleno por no disponer de los contenidos definitivos. Rellenar texto es muy sencillo con el famoso Lorem Ipsum y otras técnicas que ya presentamos en este mismo sitio. Sin embargo, incluir imágenes de ...