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

Crear imágenes usando solo CSS

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

CSS Checkboxes estilo iPhone

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.

Continúa leyendo CSS Checkboxes estilo iPhone

La propiedad Font – CSS

De las propiedades CSS que podemos escribir en forma compacta (shorthand), probablemente font es la menos conocida y la menos utilizada. Esto se debe a que su notación  en la forma compacta es un poco complicada y en muchos casos puede generar confusión. Además, muchas veces termina siendo más larga que escribir cada propiedad por separado.

Sin embargo, no debemos descartarla. A continuación vamos a ver como se utiliza la notación compacta para font y en que casos puede ser conveniente utilizarla. Continúa leyendo La propiedad Font – CSS