Nos adelantamos al futuro y presentamos una característica aún no soportada en la mayoría de los navegadores.
Las variables de CSS aportan muchas de las mismas ventajas que las variables clásicas ofrecen en los lenguajes de programación: conveniencia, código de reutilización, una base de código más legible, y la mejora de error-corrección.
La propiedad line-height en CSS controla el espacio entre las líneas de un texto. A menudo se fija en un valor sin unidades (por ejemplo, line-height: 1.4; ) para que sea proporcional al tamaño de letra. Es una propiedad muy importante para llevar un control tipográfico de texto. Si se opta por un valor demasiado bajo las líneas quedarán unas encima de otras; y si por el contrario se establece un valor demasiado alto el resultado será el de unas líneas de texto absurdamente separadas. Ambas opciones dificultan la legibilidad.
En este artículo vamos a centrarnos en algunos trucos basados en esta propiedad. Si eres capaz de establecer el valor exacto de line-height, ¡podrás conseguir resultados sorprendentes!
Una guía para el uso de las etiquetas <picture> y srcset.
Dentro de toda la información que engloba una página web, las imágenes son a menudo una de las partes más importantes. Desde que existe internet, y ya van más de 25 años, las imágenes no han sido muy “adaptables”, siempre han tenido como un valor fijo su tamaño, el formato, el recorte que muestran. Todo ello definido por un único src.
Dentro de los lenguajes de programación web, coincidimos todos en que CSS es el más sencillo. Está basado en una lista simple de propiedades que afectan a un elemento. ¿Que necesitas cambiar el tamaño de un texto? Tienes la propiedad la font-size, y así con todos los elementos.
La dificultad viene cuando estás embarcado en un proyecto profesional con una cierta complejidad y esperas un rendimiento alto de la programación. Ahí el CSS se convierte en un sistema también complicado, teniendo en cuenta además que a la gran variedad de propiedades a aplicar a un elemento o conjunto de elementos hay que sumar múltiples navegadores y motores de diseño.
Este artículo pretende ser una recopilación de los errores más comunes.
Vamos a ver una forma alternativa de definir un pasador de imágenes usando tecnologías de HTML5, en concreto, transiciones de CSS3.
En anteriores entradas hemos hablado de como hacer animaciones HTML 5 con SVG de varias maneras: con animaciones y transformaciones propias de SVG, además del uso de requestAnimationFrame.
En esta ocasión vamos a ver que con conocimientos de jQuery y CSS 3 podemos hacer animaciones sencillas, tal vez menos optimizadas que en los anteriores métodos, pero más que suficiente para la mayoría de casos.
En esta entra entrada de blog vamos a hablar de buenas prácticas, recogidas en frameworks, para comenzar un proyecto HTML5 con garantías. Entre estos frameworks me gustaría destacar dos: HTML5 Boilerplate y Twitter Bootstrap