Por qué no usar “transparent” en CSS

La palabra clave transparent existe desde CSS2. Su utilidad era sobrescribir un color o fondo que se hubiera definido previamente para algún elemento. Antes de CSS3 y RGBA, solo teníamos la opción de definir colores sólidos o, transparente.

En CSS3 la definición ha cambiado y hay que tener cuidado con el uso de transparent en combinación con otras propiedades.
Continúa leyendo Por qué no usar “transparent” en CSS

Centrado vertical con CSS3

Uno de los problemas que se presentan con mayor frecuencia al trabajar con CSS es el centrado vertical.

Hay una gran cantidad de técnicas para solucionar este problema de forma consistente, pero hasta hace muy poco no existían formas sencillas de hacerlo sin recurrir a hacks.

Veamos que podemos hacer con las nuevas propiedades que nos ofrece CSS3. Pueden ver los ejemplos funcionando en este demo.
Continúa leyendo Centrado vertical con CSS3

Alternativas a FlexSlider

FlexSlider es una de las librerías de JQuery mas usadas para implementar carruseles y rotadores (sliders). Es muy fácil de implementar y es muy completo.

Está librería fue adquirida por WooThemes hace un par de años y parece que su desarrollo ha sido abandonado. Hay mas de 500 issues abiertos y casi 50 Pull Request abiertos en GitHub.

Afortunadamente hay muchas librerías similares y de código abierto. Veamos que opciones hay:

Continúa leyendo Alternativas a FlexSlider

Layout CSS alineado a la derecha con inline-block

Float o inline-block

Desde que se abandonó el uso de tablas y se empezó a aprovechar CSS para diseñar layouts, float se ha convertido en una de las propiedades mas utilizada. Aunque float no fue concebida para organizar un layout, ha funcionado relativamente bien, y ya estamos acostumbrados a lidiar con los problemas que a veces surgen.

Recientemente se ha hablado mucho de usar display: inline-block como alternativa a los floats. Esta tampoco es la solución ideal, pero nos brinda otras posibilidades. Ambos enfoques tienen sus ventajas y desventajas, y algunas características en común.

Layout alineado a la derecha

Una de las desventajas de inline-block es que los elementos siempre fluyen de izquierda a derecha. Es el equivalente a usar float: left. Lo podemos ver en este ejemplo.

Con float: right podemos hacer que los elementos fluyan desde la derecha, y en principio no hay equivalente usando display: inline-block. Sin embargo, con un pequeño hack podemos lograrlo.
Continúa leyendo Layout CSS alineado a la derecha con inline-block

Web apps como aplicaciones nativas en iOS

Existen algunas desventajas al desarrollar aplicaciones web, respecto a aplicaciones nativas para móviles.

Una de estas desventajas es el método para acceder a la aplicación. Cuando se instala una aplicación nativa, nos queda el acceso directo, para poder acceder a esta. Con una aplicación web, debemos abrir el navegador, escribir la dirección y ahí si llegamos a la aplicación. Afortunadamente podemos crear un bookmark (guardarla como favorita), con lo cual nos queda un acceso directo igual al de la aplicación nativa.

Otro de los problemas es que al estar dentro del navegador (Safari), no podemos aprovechar toda la pantalla del móvil, pues tenemos a la barra de direcciones y la barra de abajo que nos quitan espacio. Afortunadamente, este es un problema que también se soluciona fácilmente.

Continúa leyendo Web apps como aplicaciones nativas en iOS