CSS3 Фоновый градиент - PullRequest
Новая
       4

CSS3 Фоновый градиент

2 голосов
/ 14 июля 2010

У меня есть этот класс для страницы, которую я тестирую (я только начинаю пытаться реализовать 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 не поддерживает это.

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

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

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

Ответы [ 2 ]

1 голос
/ 14 июля 2010

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

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

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

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

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

Marko

0 голосов
/ 07 июля 2011

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

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

...