Efecto de fundido de gradiente alfa con CSS 3

Question

Me gustaría saber si sería posible replicar el efecto como la parte inferior de la lista de Top Tweets con CSS puro?

http://www.twitter.com

Answer 1

Sí se puede! Aprovechando colores RGBA y gradientes CSS3, podemos aplicar los siguientes estilos a un elemento y tienen una decoloración fondo semitransparente:

Mozilla:

background: -moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1)); 

Webkit:

background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255, 1)); 

(Actualizado después de los cambios en los degradados de Webkit)

Lamentablemente, esto solo funciona en Firefox 3.6+, Safari y Ch Roma. Si necesita el efecto en IE o versiones anteriores de Firefox, entonces sería mejor usar el PNG semitransparente como lo hace Twitter.

Answer 2

Aunque esta no es una solución completa, funciona en Safari/Webkit, por lo que es bueno saber para alguien que hace aplicaciones móviles.

Supongamos que solo se dirige a webkit, tiene esta bonita función que se describe here.

-webkit-mask-image: -webkit-gradient(...) 

Esto también lo ayuda cuando no puede simular el fundido de salida con algún elemento superpuesto. (por ejemplo, tener una imagen en el fondo, en lugar de un color sólido)

Para el resto, siga los pasos anteriores.