CSS3 Background Gradient

Question

У меня есть этот набор классов для тестирования страницы im (просто начинаю пытаться внедрить CSS3, поэтому легко на меня).

.CSS3TESTDIV{ 
    width:228px; 
    height:300px; 
    background-color: #fff3; 
    background-image: -moz-linear-gradient(0% 100% 90deg, #0068b3, #fff); 
     background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#fff), to(#0068b3)); 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border: 1px solid #0068b3; 
    padding: 10px; 
    margin:0 10px 0 0; 
    -moz-box-shadow: 7px 7px 7px #888; 
    -webkid-box-shadow: 7px 7px 7px #888; 
    box-shadow: 7px 7x 7px #888; 
    float:left;   
} 

Все выглядит хорошо в FF (на ПК) и FF на Mac, я знаю, что IE не Suppor это.

Мой вопрос о градиенте ... от того, что у меня выше градиента, довольно плавный, но я просто хочу немного синего, чтобы подкрасться снизу ... не угасать так высоко, как я вижу это на моем browswer, и я играл с процентами и ценностями, но я не могу действительно выглядеть так, как хочу ...

Как я могу получить эффект, который я искал?

Опять же, я хочу, чтобы в основном белый сверху вниз, и немного синего цвета, снижающегося в нижней части. спасибо

Answer 1

Вы хотите использовать цветовые остановки.

Установите первый цвет 0%, второй на 90% и третий на 100% (который будет синим).

Вы можете использовать этот инструмент, чтобы получить желаемый эффект http://gradients.glrzad.com/

Убедитесь, что вы добавить 3-й цвет, хотя и расположите его на 90%.

Приветствия,

Марко

Answer 2

Совершенно верно, есть еще один сайт, который я использую совсем немного называется ColorZilla.

Это очень полезно, особенно для обеспечения того, чтобы все браузеры увидели ваш градиент. (Я там до этого переместился: /)