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]

Imagina que puedes crear una pequeña galería de imágenes sin escibir una línea de JavaScript. ¿No te lo crees? Pues en este post veremos cómo hacerlo de una forma muy sencilla. Una pista, tiene relación con que, cuando al href de un enlace consiste en una almohadilla (#) seguida de una palabra, el navegador te llevará hasta el elemento cuyo ID coincida con dicha palabra. Y hasta aquí puedo leer... [Más]

La propiedad de CSS position, como su propio nombre indica, sirve para posicionar elementos HTML. Anteriormente ya echamos un vistazo general a sus propiedades con especial atención a position:absolute;, que es uno de sus valores más útiles. En este post veremos otro interesante valor de esta propiedad: position:sticky; que a veces se pone rebelde y no quiere funcionar, aparentemente sin razón. Si position:sticky; no te funciona, sigue leyendo, porque quizá estás pasando por alto alguno de los detalles que hay que tener en cuenta para usarlo. Y si no, también, porque te puede ahorrar tiempo en el futuro. [Más]

Aprende a dividir el contenido de tus páginas en columnas responsive usando solo unas pocas reglas de CSS.

Una de las cosas que más echábamos de menos los diseñadores al pasarnos de print a web en épocas pretéritas, era la posibilidad de dividir el texto en columnas. Por suerte, todo esto cambió con la llegada de CSS3. Usando CSS3 tenemos la posibilidad de organizar los contenidos de una página web en columnas sin tener que crear elementos HTML extra, algo muy útil si estamos maquetando una web con mucho contenido o donde la longitud de línea nos quedasen demasiado grandes (como periódicos o revistas digitales). Antes, hacer esto era totalmente impensable sin la ayuda de JavaScript. [Más]

El comportamiento de un elemento con position:absolute; quizá te puede parecer errático de entrada, especialmente si no tienes suficiente experiencia maquetando con CSS y no conoces el detalle fundamental que te voy a contar en este post. Así que, si alguna vez te has desesperado al intentar posicionar un elemento de forma absoluta, mejor sigue leyendo. [Más]

No te alarmes por el título de este post. Esto no va de mindfulness ni de autoayuda, y, por supuesto, no te vamos a tocar los chakras. Es simplemente un ejercicio de pensar un poquito diferente para mostrar lo amplio que es el abanico de posibilidades al definir reglas CSS. Tampoco es que estemos descubriendo la pólvora, simplemente se trata de darte pistas para encontrar alternativas eficaces a la hora de resolver tus maquetaciones que quizá no te habías planteado. [Más]

En este tutorial vamos a aprender cómo hacer, de una forma muy sencilla y solo con HTML y CSS una galería de imágenes (o de cualquier otro elemento) al estilo Pinterest. Esto es, tenemos imágenes de distinto tamaño que no se alinean horizontalmente, sino verticalmente en columnas. Realmente Pinterest no inventó nada nuevo, pero consiguió polpularizar esta forma tan peculiar de presentar el contenido. [Más]

Los estilos específicos para imprimir muchas veces son los grandes olvidados, ya no solo a la hora de maquetar una web, sino incluso por los propios desarrolladores de navegadores. Si nunca has trabajado con ellos, probablemente las primeras veces te encuentres con algún dolor de cabeza. Realmente no es que sea muy difícil si lo planificamos bien, aprovechando los estilos CSS generales y dándole un poco de cariño a los estilos para impresión con unas pocas reglas, podemos ganar muchos puntos a los ojos de nuestros usuarios. [Más]

En este post vamos a aprender una técnica muy sencilla pero resultona para simular una cinta (ribbon, en inglés) con un texto superpuesta con CSS sobre un elemento del contenido. La aplicación práctica más habitual para esta técnica es la clásica cinta que pone "Nuevo" por encima de un producto (o cualquier otra característica que se quiera destacar) en un e-commerce, pero realmente se puede aplicar en muchos otros casos, como posts de un blog, imágenes o vídeos de una galería, un listado de usuarios… [Más]