Los checkboxes son un tipo de control muy útil. Se trata de esos pequeños cuadraditos que nos permiten marcar opciones para decidir si las activamos o las desactivamos. Su mayor problema es que son pequeños y no son especialmente bonitos. Y para acabar de denigrarlos, cuando Apple lanzó el iPhone cambió el aspecto de este tipo de selectores para que, en vez de ser una simple caja, se comportasen como una clavija, deslizándose de un lado a otro. El caso es que en HTML no están disponibles controles como este switch de iOS, y nos tenemos que conformar con el humilde pero efectivo checkbox. En este artículo te voy a explicar paso a paso y con detalle cómo conseguir el aspecto que desees. [Más]

Ya he hablado en este blog hace mucho tiempo acerca de las variables CSS y cómo nos permiten obtener una gran potencia sin necesidad de recurrir a metalenguajes como Sass/SCSS o similares solo para parametrizar los diseños. Hoy voy a comentar brevemente cómo podemos modificar dinámicamente los valores de estas variables CSS mediante JavaScript, por ejemplo para cambiar los colores de la página, sin recargarla, cambiando tan sólo el valor de las variables CSS que controlan su aspecto. [Más]

La propiedad CSS llamada line-height, tiene un "truco" importante que afecta a los elementos que heredan el valor de esta propiedad y que, si no lo conoces, puede hacer que obtengas resultados inesperados o que tengas que estar ajustando a mano individualmente la altura de las líneas y retocándolo en varios sitios cada vez que cambies este valor. Te cuento por qué pasa esto y cómo puedes sacarle partido. [Más]

Una necesidad común en casi cualquier aplicación Web es la de mostrar diálogos al usuario. Se trata de los típicos "pop-ups" que surgen en la aplicación de vez en cuando con múltiples propósitos: notificaciones, preguntar algo al usuario, mostrar los detalles de un registro en una base de datos... Casi cualquier cosa que se te pueda ocurrir. Crear algo como esto mediante el uso de capas y un poco de JavaScript no es muy complicado, pero tiene bastantes "pegas". Por eso el W3C, encargado de los estándares Web, definió en HTML 5.2 un nuevo elemento específicamente pensado para esta tarea: <dialog> y que tiene muchas aplicaciones. Vamos a ver cómo sacarle todo el partido. [Más]

Google Fonts es un recurso maravilloso y gratuito para acceder a decenas o centenares de fuentes tipográficas de manera rápida y con rendimiento, ya que además se sirven desde la CDN de Google. Sin embargo algunas personas prefieren servir las fuentes desde su propio servidor, sin depender de los servidores de Google. Aunque yo te recomiendo encarecidamente que uses las fuentes desde los servidores de Google y no desde el tuyo propio, dado que me lo han preguntado, voy a explicar cómo conseguir "gorronear" esas fuentes y utilizarlas desde tu propio servidor o en local. [Más]

En CSS se expresan los colores de diversas maneras, pero las más comunes son dos: RGB y HSL. Tradicionalmente todos hemos aprendido a manejar colores basándonos en un principio muy simple sacado de la naturaleza: la combinación de colores. En el colegio aprendimos que todo color se puede expresar como la combinación de otros tres colores básicos: el rojo, el verde y el azul. En esto es en lo que se basa la notación RGB. Sin embargo esta notación presenta varios problemas, entre ellos que no es nada intuitiva. La notación HSL, por el contrario, es mucho más fácil de visualizar y utilizar en el día a día. En este post te explico en qué consiste cada una de ellas y cómo sacarles partido. [Más]

En CSS3 existen un par de propiedades que tienen que ver con cómo se colocan las imágenes de fondo en elemento HTML y que suelen provocar bastantes dudas entre los programadores cuando se las encuentran por primera vez. Se trata de las propiedades background-origin y background-clip. El motivo es que ambas toman exactamente los mismos valores y, aparentemente, hacen lo mismo. Pero nada más lejos de la realidad. En verdad las dos se complementan muy bien como voy a explicar en este post... [Más]

¿Cuántas veces has estado toqueteando una página que gestionas desde las herramientas del desarrollador? Seguro que muchas. Lo típico es que un elemento rebelde no acaba de quedar en donde a ti te gustaría o quieres afinar mucho más un margen, un tamaño o un color. Así que abres las herramientas del desarrollador y te pones a seleccionar elementos, ver sus reglas resultantes, cuáles influyen sobre el resultado final, y retocas directamente los estilos en el editor del lateral. Si tus cambios se reducen a un par de propiedades CSS es muy fácil llevarlos a producción, pero si son muchos hacerles el seguimiento puede ser una locura. A partir de ahora la cosa cambia mucho gracias a Crrome 65... [Más]

CSS es un lenguaje más bien pobre: no dispone de construcciones complejas que nos permitan tomar decisiones con condicionales, repetir operaciones mediante bucles, etc... La máxima lógica que nos permite aplicar es cambiar ciertas definiciones en función del medio (pantalla, impresora...) o los anchos y resoluciones (media-queries). Esto hace que mantener hojas de estilo CSS muy grandes resulte complicado. Por ejemplo, si estamos reutilizando un color o una dimensión (ancho o alto) a lo largo de un documento CSS muy largo, no nos queda más remedio que repetir el mismo valor una y otra vez. Si más adelante decidimos cambiarlo tenemos que buscar y reemplazar con cuidado en el documento de texto. Las variables CSS son una realidad en todos los navegadores modernos desde hace muy poco tiempo, pero ya podemos sacarles todo el partido. Con este completo artículo aprenderás a dominarlas... [Más]

Los tooltips son esas ventanitas flotantes pequeñas de color amarillo que aparecen cuando pasas por encima de algunos elementos de las interfaces de usuario de muchas aplicaciones. Los controla el sistema y poco puedes hacer para controlar su aspecto o ubicación. Pero no podemos controlar el aspecto que tienen ni cómo se muestran. Mediante JavaScript es fácil detectar el movimiento del cursor sobre un determinado elemento o un trozo de texto y mostrar una capa con el aspecto que deseemos en el lugar que queramos, pero no deja de ser un trabajo pesado y tedioso, además de propenso a errores y que carga un poco más la página. En este post voy a explicar cómo podemos crear tooltips con el aspecto que deseemos, que aparezcan donde queramos y utilizando exclusivamente CSS, sin escribir nada de código... [Más]