ProgramandooIntentándolo

2 Nov 2017

Imágenes responsive con HTML y CSS

reset css

Las imágenes y el diseño web responsive parece que no se llevan muy bien, porque encajar elementos con tamaños fijos en otros con tamaños relativos no siempre es sencillo, pero por suerte tenemos varias posibles soluciones para las imágenes.

Hay dos formas distintas de afrontar el problema, que la imagen tenga un tamaño relativo en lugar de uno fijo y así se adaptará a los diferentes tamaños de pantalla o bien tener distintas versiones de las imágenes para los distintos tamaños posibles.

Como suele ser habitual dependerá de cada caso concreto cual es la mejor solución. Por ejemplo en una página en la que tengamos 20 imágenes de alta resolución sería conveniente tener diferentes versiones de las imágenes para que el tiempo de carga sea más rápido en dispositivos en los que no vamos a poder aprovechar tanta resolución y que ...

26 Oct 2017

Reset CSS o como normalizar los estilos en CSS

reset css

Cada navegador tiene una hoja de estilos base distinta, aunque las diferencias no son muy grandes pueden hacer que lo que en un navegador se visualice correctamente en otro no o simplemente que se vea distinto.

Una forma simple de ver las diferencias es probar un código HTML sin aplicarle estilos en diferentes navegadores para ver como hay elementos que tienen estilos predefinidos (pero no estándar) como por ejemplo los enlaces o las listas, pero no es solo eso los elementos pueden tener márgenes o altos de línea distintos. Y por este motivo surge la necesidad de resetear los estilos para poder comenzar los diseños sin interferencias.

La idea del CSS reset es quitar los estilos a todos los elementos para que se comporten igual en todos los navegadores, en realidad tampoco se llega hasta el punto de quitar todos los estilos sino ...

20 Oct 2017

Tutorial Less: 13. Funciones para trabajar con colores en Less

TypeScript reference

Less nos ofrece un buen conjunto de funciones de diferentes tipos que le añaden un plus a la hora de simplificar la forma en la que podemos generar nuestras hojas de estilos y además nos permiten hacer cosas bastante interesantes.

Nos vamos a centrar en las funciones referentes a operaciones con colores porque son las que más juego nos pueden dar y serán de las que más utilicemos, de hecho, en varios de los artículos anteriores ya hemos utilizado varias funciones para trabajar con colores

En la web de Less tenemos un apartado de la documentación completo con todas las funciones que hay, por si quieres consultarlas.

El propósito de este post es ver de qué formas podemos usar las funciones de Less para conseguir esquemas de color fácilmente y sin tener que recurrir a herramientas externas o volvernos ...

10 Oct 2017

Tutorial Less: 12. Combinar los valores de una propiedad en Less (Merge)

Logo less

Less permite combinar los valores de una propiedad definidos en distintos lugares para que en lugar de sobrescribirse que es el comportamiento de CSS para estas situaciones, se vayan incluyendo los nuevos valores como una lista de valores separados por comas o por espacios dependiendo de la forma en la que se haga.

Esta característica solo tiene sentido para usarse con propiedades que soporten listas de valores como los fondos, los sombreados, las transformaciones, animaciones y transiciones o las familias de fuentes, pero en realidad se pueden usar con cualquier propiedad aunque no tenga mucho sentido.

Sintaxis del merge en Less

Hay 2 posibilidades para combinar las listas de propiedades, separándolas por comas o por espacios, que se haga de un modo u otro depende de la sintaxis utilizada.

Para separar por comas hay que añadir + como sufijo al nombre ...
3 Oct 2017

Tutorial Less: 11. Espacios de nombres o namespaces en Less

Logo less

Los espacios de nombres o namespaces son una forma para agrupar clases y mixins en Less y así poder organizar los estilos para facilitar su búsqueda, reutilización, … y también para evitar los conflictos por usar nombres de clases o de mixins repetidos para varias cosas o con los definidos por librerías externas.

Desde el punto de vista organizativo su uso tiene sentido cuando tenemos múltiples hojas de estilo y miles de líneas, si no con tener las clases definidas con un mínimo de cuidado y organización es suficiente. Pero aun en estos casos hay dos puntos a tener en cuenta, la reutilización y la posibilidad de conflictos con otras clases, ya sean externas o nuestras.

Los namespaces son un gran aliado para la reutilización de mixins y clases sobre todo cuando no tenemos una hoja de estilos para cada cosa, ...