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
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
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.
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
Con las nuevas posibilidades que CSS3 nos brinda, todos los días nos encontramos con experimentos para aprovechar el potencial de este lenguaje.
Un tipo de experimentos bastante común, es el de emular imágenes usando únicamente CSS. Van desde la creación de iconos sencillos, pasando por logos un poco más elaborados, hasta imágenes mucho mas complejas como la botella de Coca Cola o la Ana kournikova en CSS3.
Creo que estos experimentos funcionan muy bien como aprendizaje y solo en algunos casos tienen utilidad práctica. No quiero entrar en la discusión sobre si vale la pena usar estas técnicas. Yo personalmente creo que podemos aprovechar algunas técnicas para reducir la carga de nuestros sitios y brindar una mejor experiencia a nuestros visitantes.
A continuación les mostrare algunas técnicas para crear imágenes usando propiedades CSS.
Continúa leyendo Crear imágenes usando solo CSS
Me encontré este artículo http://www.thecssninja.com/css/custom-inputs-using-css, que muestra como dar estilo a radio buttons y checkboxes usando CSS sin utilizar javascript. Como casi siempre, IE8 e inferiores se quedan por fuera debido a la falta de soporte de la pseudoclase :checked. Sin embargo, es una técnica muy útil para embellecer nuestros formularios, yo ya la estoy usando.
Para todos los que les gustan las interfaces del iPhone, usando esa técnica, podemos convertir un checkbox normal en un switch estilo muy parecido al que usa iOS.