CSS3 radialne gradienty z RGBA()

Question

pracuję na stronie internetowej, która wykorzystuje wiele gradienty CSS3 jako nakładka na tle płytkami z obrazu tekstury

site url: --snipped--

obecnie dla nagłówek używam następujący CSS:

#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;} 

tutaj headerBg.png jest półprzezroczysty tekstura rozmiar 5x5 piksela, reklamy dla ciała muszę stworzyć ten background:

Muszę wiedzieć, jak zrobić tego rodzaju promieniowe tło w CSS3, początkowo użyłem tego samego kodu co nagłówek, ale z rgba() dla koloru, ustawiając koniec gradientu z zerową przezroczystością, ale spowodował on zbyt duży hałas.

wypróbowałem kilka generatorów online również dla promieniowego tła CSS3, ale żaden z nich nie był dobry!

Ten obraz, którego używam, zajmuje 280kbs i chcę go zmniejszyć, ponieważ znacząco wpływa na wydajność! Pomoc byłaby doceniona.

zmiana:

Prześlij PSD, można pobrać z http://ylspeaks.com/stackoverflow_css3.zip

i dodanie nagród

Answer 1

Edit Jan 2011: Webkit obsługuje nightly teraz eliptyczne gradienty http://webkit.org/blog/1424/css3-gradients/, będą ostatecznie trafiają do Safari i Chrome. Podrabianie eliptycznych promieniowych gradientów przez transformacje css będzie ostatecznie niepotrzebne.

---

Twój problem ma najtrudniejsze ograniczenia jaki kiedykolwiek spotkałem, ale jest to ciekawe wyzwanie i to ilustruje ograniczenia każdego podejścia do przeglądarek promieniowych środowisk, więc dlatego zdecydowałem się na próbach.

Po pierwsze, podejście rgba jest martwe, ponieważ nieprzezroczystość ukryje część hałasu. Lepiej zastosować półprzezroczysty hałas na górze gradientu, można uniknąć dodatkowych div stosując wielokrotne tła tego samego obrazu:

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

można zauważyć właściwość koloru na końcu deklaracji, to wygląda dziwnie, ale to, jak deklarujesz kolory, gdy stosujesz wiele środowisk.

drugie, WebKit nie obsługuje eliptyczne tła, tak aby obejść to squishing gradient przez -webkit transformaty i umieszczenie go nieco dalej w górę:

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

Do normalności, słuszne do zrobienia wydaje się być zastosowanie kołowych środowisk zarówno na FF i Webkit, a następnie je przekształcić. Jednak transformacja Firefoksa nie obsługuje skalowania gradientów!Stosujemy więc eliptyczne tło:

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

Ale ponieważ kontener Webkita jest zgnieciony, gradient przeglądarki Firefox jest większy! W tym momencie pomyślilibyśmy o zastosowaniu różnych reguł css dla wysokości gradientu, ale ponieważ Firefox nie skaluje gradientu, możemy zastosować tę samą transformację na eliptycznym tle, aby pojemniki miały taką samą wysokość:

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

I voila! mamy eliptyczny gradient z szumem, który działa zarówno w Safari, jak i Firefoksie!

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));