gradientes radiales CSS3 con RGBA()

Question

estoy trabajando en un sitio web que utiliza múltiples gradientes CSS3 como superposición de un fondo de mosaico la textura con la imagen

URL del sitio: --snipped--

actualmente para cabecera estoy usando CSS siguiente:

#header { 
background: #DBD6D3; 
height: 364px; 
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#FFFFFF,#DBD6D3); 
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#DBD6D3),to(#FFFFFF)); 
} 

#header .wrp{background:url('img/headerBg.png');height:100%;padding-top:40px;} 

aquí headerBg.png es una textura semitransparente de píxeles de tamaño 5x5, anuncio para el cuerpo que necesito para crear este fondo:

Necesito saber cómo hacer este tipo de fondo radial en CSS3, inicialmente había usado el mismo código como encabezado pero con rgba() para el color, estableciendo el final del degradado con 0 opacidad pero creaba demasiado ruido.

intenté algunos generadores en línea también para fondo radial CSS3 pero ninguno de ellos era bueno!

Esta imagen que estoy utilizando está tomando 280kbs y quiero reducirla ya que afecta significativamente el rendimiento. La ayuda sería apreciada

actualización:

Subir PSD, se puede descargar desde http://ylspeaks.com/stackoverflow_css3.zip

y la adición de recompensas

Answer 1

Editar Ene 2011: Webkit noche ahora es compatible con gradientes elípticas http://webkit.org/blog/1424/css3-gradients/, éstos eventualmente encuentran su camino hacia Safari y Chrome. Falsificar gradientes radiales elípticos a través de transformadas CSS eventualmente será innecesario.

---

Su problema tiene las limitaciones más difíciles que he encontrado, pero es un reto interesante e ilustra las limitaciones de cada enfoque de los navegadores para los fondos radiales, así que por eso me decidí por probar.

En primer lugar, el enfoque de rgba nace muerto porque la opacidad oculta parte del ruido. Es mejor aplicar el ruido semitransparente en la parte superior del gradiente, se puede evitar el div adicional mediante la aplicación de fondo múltiple en la misma imagen:

background: url(noise.png) repeat top left, -webkit-gradient(radial,50% 0,700,50% 0,100,from(#6f2813),to(#B9513D)) transparent; 

Usted puede notar la propiedad de color al final de la declaración, que parece extraño, pero así es como declaras los colores cuando aplicas fondos múltiples.

En segundo lugar, webkit no soporta fondos elípticas, por lo que el trabajo en torno a esto se aplastando el gradiente a través webkit-transformar y posicionándola un poco más arriba:

-webkit-transform: scale(1, 0.7) translate(0, -350px); 

Para la cordura, lo correcto hacer parece ser aplicar fondos circulares en FF y webkit y luego transformarlos. Sin embargo, la transformación de Firefox no admite gradientes de escala.Así que aplicamos un fondo elíptico:

background: url(noise.png) repeat top left, -moz-radial-gradient(50% 0 0deg,ellipse farthest-side,#B9513D,#6f2813) transparent; 

Pero, dado que se aplastó contenedor de Webkit, gradiente de Firefox es más grande! En este punto, pensaríamos en aplicar diferentes reglas CSS para la altura del degradado, pero como Firefox no escala el degradado, podemos aplicar la misma transformación en el fondo elíptico para que los contenedores tengan la misma altura:

-moz-transform: scale(1, 0.7) translate(0, -250px); 

¡Y listo! tenemos un gradiente elíptico con ruido, que funciona tanto en Safari como en Firefox.

http://duopixel.com/stackoverflow/gradient/

Answer 2

background: #702914; 
background: -moz-radial-gradient(50% 0% 0deg,circle farthest-corner,#A94122,#702914); 
background: -webkit-gradient(radial,50% 59,500,50% 0,40,from(#702914),to(#A94122));