CSS3 радиальные градиенты с RGBA () - PullRequest
Новая
       31

CSS3 радиальные градиенты с RGBA ()

15 голосов
/ 16 декабря 2010

Я работаю над веб-сайтом, который использует несколько градиентов css3 в качестве наложения для фона, покрытого текстурой изображения

URL сайта: - перерезано -

в настоящее время для заголовка я использую следующие 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;}

здесь headerBg.png - полупрозрачная текстура размером 5x5 пикселей, для тела мне нужно создать этот фон: alt text

Мне нужно знать, как сделать такой вид радиального фона в CSS3, изначально я использовал тот же код, что и в заголовке, но с rgba () для цвета, установив конец градиента с непрозрачностью 0, но он создавал слишком много шума. 1013 *

пробовал также несколько онлайн-генераторов для радиального фона CSS3, но ни один из них не был хорошим!

Это изображение, которое я использую, занимает 280 КБ, и я хочу уменьшить его, так как оно значительно влияет на производительность! Помощь будет оценена.

Обновление:

Загрузить PSD, можно загрузить с http://ylspeaks.com/stackoverflow_css3.zip

и добавление вознаграждения

Ответы [ 2 ]

23 голосов
/ 24 декабря 2010

Редактировать январь 2011: Ночью Webkit теперь поддерживает эллиптические градиенты http://webkit.org/blog/1424/css3-gradients/,, которые в конечном итоге попадут в Safari и Chrome. Фальсификация эллиптических радиальных градиентов с помощью CSS-преобразований в конечном итоге будет ненужной.

Ваша проблема имеет самые трудные ограничения, с которыми я когда-либо сталкивался, но это интересная проблема, и она иллюстрирует ограничения каждого подхода браузера для радиального фона, поэтому я решил попробовать.

Во-первых, подход rgba мертворожден, потому что непрозрачность скрывает часть шума. Лучше применять полупрозрачный шум поверх градиента, вы можете избежать дополнительного div, применив несколько фонов к одному и тому же изображению: 

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

Вы можете заметить свойство color в конце объявления, оно выглядит странно, но так вы объявляете цвета при применении нескольких фонов.

Во-вторых, webkit не поддерживает эллиптические фоны, поэтому обходной путь к этому заключается в сжатии градиента через -webkit-transform и расположении его немного выше: 

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

Для здравомыслия, кажется, что правильнее всего было бы применить круговые фоны как к FF, так и к webkit, а затем трансформировать их. Тем не менее, преобразование Firefox не поддерживает масштабирование градиентов! Поэтому мы применяем эллиптический фон: 

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

Но, поскольку контейнер Webkit сжат, градиент Firefox больше! В этот момент мы подумали бы о применении различных правил CSS для высоты градиента, но поскольку Firefox не масштабирует градиент, мы можем применить то же преобразование к эллиптическому фону, чтобы получить контейнеры одинаковой высоты: 

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

И вуаля! у нас есть эллиптический градиент с шумом, который работает как в Safari, так и в Firefox!

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

0 голосов
/ 23 декабря 2010 
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));
...