A la hora de preparar nuestros estilos CSS para impresión hay una serie de recomendaciones básicas que debemos seguir. Una de las más importantes es prestar atención a elementos que tengan colores o imágenes de fondo ya que, por defecto, los navegadores los desactivan y dejan en mano del usuario la decisión de imprimirlos o no. Lo que se suele hacer habitualmente en estos casos es cambiar el color del texto y bordes en estos elementos para que la información sea legible y estos elementos sigan siendo destacados, pero, ¿y si nos encontramos un caso en el que necesitamos que se imprima el color de fondo sí o sí? Pues sí, hay una forma de forzar que se impriman los colores de fondo con CSS a través de la propiedad print-color-adjust. [Más]

Existe en CSS una propiedad muy interesante para anular y activar los eventos de puntero sin necesidad de JavaScript. Y no es que sea extremadamente nueva, simplemente es la típica propiedad que suele pasar inadvertida al usuario promedio de CSS en el día a día y que solo descubres cuando necesitas una solución a un problema muy puntual. Se trata de pointer-events. [Más]

¿Sabías que en CSS puedes definir valores de propiedades en función del viewport sin necesidad de media queries? Gracias al uso de funciones lógicas te puedes ahorrar mucho código CSS en forma de media queries innecesarias, especialmente con clamp(). Esto va a simplificar mucho tus hojas de estilos, que serán más limpias y mucho más fáciles de mantener. [Más]

En CSS tenemos la posibilidad de usar filtros para alterar imágenes insertadas directamente en el código html sin necesidad de pasar antes por Photoshop u otro editor de fotos.¿Pero qué pasa con las imágenes de fondo? A las imágenes de fondo no les podemos aplicar filtros directamente pero tenemos varias alternativas a nuestra disposición.
En este post veremos cómo modificar con CSS una imagen de fondo para convertirla en una imagen monotono. ¿Por qué querríamos hacer esto? Pues, por ejemplo, para darle más presencia a un color corporativo en nuestra página. [Más]

En este post aprenderemos a hacer un botón para un menú hamburguesa que cambiará de icono entre las clásicas tres rayitas y un aspa (vamos, una "X") alternativamente cada vez que hagamos clic. Y todo esto sin usar imágenes ni JavaScript. ¿Magia? ¿Brujería? No, CSS.
De hecho este botón lo podríamos aprovechar para usarlo con este menú escamoteable, también sin JavaScript, que ya vimos en otro post. [Más]

CSS es mucho más potente y profundo de lo que muchos desarrolladores creen y, cualquiera que lo quiera abordar seriamente para maquetar webs, realmente puede sentirse abrumado y caer en la tentación de solo rascar la superficie. En este post he recopilado unos cuantos puntos clave que pueden ayudar a cualquiera que se esté iniciando en serio en la maquetación web. [Más]

En este post veremos tres formas distintas de modificar con CSS la apariencia del icono de imágenes rotas que muestra el navegador cuando no puede cargar una imagen, que suele ser un icono genérico. Aunque este tipo de elementos no se suelen modificar en todos los proyectos, puede haber casos concretos en los que nos interese hacerlo, por ejemplo, en una web con contenidos generados por el usuario donde se quiere destacar bien este hecho, o simplemente porque quieres cuidar hasta el más mínimo detalle del diseño de la web. [Más]

Los enlaces internos dentro de un mismo documento HTML son una solución muy práctica y habitual, especialmente en páginas de preguntas frecuentes o ecommerce monoproducto. Son muy cómodos porque te permiten acceder de forma muy rápida y fácil a diferentes secciones cuyo contenido quizá no es suficiente para disponer de su propia página. En este post vamos a aprender a ponerle una transición suave cuando naveguemos entre ellos sin necesidad de recurrir a JavaScript. [Más]

Las animaciones y transiciones de CSS3 son geniales, siempre que tenga sentido usarlas y que no se abuse de ellas como se hizo en la época en la que Flash reinaba en este terreno. Son fáciles de implementar, vistosas y muy útiles a la hora de mejorar la experiencia visual y de interacción web. Pero, hay una pequeña limitación con los fondos que son degradados de color (o gradientes) y que vamos a aprender a resolver fácilmente. [Más]

En este post le echamos un vistazo práctico a las propiedades CSS que tenemos actualmente disponibles para modificar la apariencia de las barras de scroll en los principales navegadores web. [Más]