CSS3 градиенты выглядят паршиво под Fx

Question

В теме я упомянул только Firefox, потому что на данный момент это единственный браузер, в котором я тестировал мой код, хотя было бы неплохо, если бы кто-то мог дать мне общее решение:).

background-image: -moz-linear-gradient(center top, rgb(30, 30, 30), rgb(4, 4, 4));

Использованиекод выше я вижу ... шаги?:) Я имею в виду - он не гладкий, а очень прямоугольный, вот так: светло-серый, немного темнее серый, светло-черный, черный вместо цветов, плавно переходящих друг в друга.Есть ли способ предотвратить это?

Answer 1

У тебя лучшее цветовое зрение, чем у меня, мой друг. Мне слишком темно, чтобы увидеть градиент вообще. В любом случае, вот стиль, который поддерживает все современные браузеры, как сегодня:

скрипка: http://jsfiddle.net/zbeY3/1/

CSS

background:-moz-linear-gradient(rgb(30, 30, 30), rgb(4, 4, 4));
background:-o-linear-gradient(rgb(30, 30, 30), rgb(4, 4, 4)); /* Opera */
background:-webkit-linear-gradient(rgb(30, 30, 30), rgb(4, 4, 4)); /* Safari 5.1+, Chrome 10+ */  
background:-ms-linear-gradient(rgb(30, 30, 30), rgb(4, 4, 4)); /* IE10 PP */
background:linear-gradient(rgb(30, 30, 30), rgb(4, 4, 4)); /* W3C */ 

Answer 2

Я понял, почему мой градиент не был плавным (по крайней мере, я так думаю :)) - это потому, что разница между начальным цветом и конечным цветом слишком мала.На большой поверхности это очень заметно, хотя, если я создаю div размером 100x100px, это нормально ...

Answer 3

Я обычно использую эту формулу для FF:

background: -moz-linear-gradient(top, topvalue 0%, bottomvalue 99%); /* firefox */

так, в вашем случае:

background: -moz-linear-gradient(top, rgb(30, 30, 30) 0%, rgb(4, 4, 4) 99%);

Кроме того, если вам интересно, это группа, которую я использую для охвата различных браузеров. Это для вертикального градиента, от # 999 до # 000.

/* CSS Gradients */

background: -moz-linear-gradient(top, #999999 0%, #000000 99%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(99%,#000000)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#000000',GradientType=0 ); /* ie */

Надеюсь, это поможет!