Кроссбраузерный градиентный фон CSS3 с rgb/rgba и запасными вариантами

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

Пример jsFiddle: http://jsfiddle.net/HelloJoe/hUxdh/

Кажется, я рассмотрел большинство браузеров, но у меня есть несколько вопросов:

  1. Есть ли какие-либо другие широко используемые браузеры, которые я пропустил, а также какие свойства потребуются для таких устройств, как iPad/SmartPhone, или они будут отображать одно из используемых в настоящее время свойств?

  2. Если случайно градиент не отображается, достаточно ли исходного background: rgb(50, 50, 50); для создания сплошного цвета?

  3. Со значением filter я не мог заставить его работать, используя значения rgb, и вместо этого мне пришлось прибегнуть к использованию значения hex, не то чтобы это была огромная проблема, но я пытаюсь использовать только значения rgb. Есть ли способ обойти это или он просто не принимает их?

  4. Если бы я использовал rgba вместо rgb, тогда мне нужно было бы иметь значение градиента фона rgba, значение фона градиента rgb в качестве отката для отсутствия рендеринга альфа-прозрачности, а затем откат сплошного фона в случае, если градиент не был визуализирован в все? Или браузер проигнорирует значение альфа-прозрачности и просто отобразит rgb из rgba без отдельного возврата фона rgb?

  5. В качестве окончательного резерва для всего, потребуется ли установленное значение hex в начале свойств CSS? Я думаю, нет никакого вреда в добавлении значения hex, но идея использования rgb заключается в том, что если rgba можно использовать, это позволяет быстро и легко изменить цвет на всем сайте. Таким образом, наличие резервного значения hex сделало бы использование rgb/rgba бессмысленным для того, для чего я намереваюсь его использовать, поскольку мне все равно нужно было бы просмотреть и отредактировать все значения hex.

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


person no.    schedule 11.09.2011    source источник


Ответы (1)


Могу ли я предложить вам этот веб-сайт, чтобы помочь вам с вашими градиентами и откатами:
http://www.colorzilla.com/gradient-editor/

person Simon Arnold    schedule 11.09.2011
comment
Это определенно потрясающий генератор, большое спасибо, Саймон! Тем не менее, пара вопросов остается в силе, например, если браузер не читает rgba, он просто читает значение rgb и игнорирует альфа-прозрачность? Также нужно ли когда-либо значение hex в качестве окончательного отката? - person no.; 11.09.2011
comment
@JoeMottershaw Моя любовь к редактору градиентов Ultimate от Colorzilla не может быть измерена (+1), но может случиться так, что вы захотите использовать другие вещи, такие как закругленный угол и тень, я просто добавлю css3pie.com. Обратите внимание, что сам веб-сайт представляет собой демонстрацию того, как на нем работают тени и закругленные углы. - person Joonas; 29.09.2011