За последние 24 часа нас посетили 59214 программистов и 1838 роботов. Сейчас ищут 797 программистов ...

градиентная заливка

Тема в разделе "HTML и CSS", создана пользователем karamba, 23 апр 2012.

  1. karamba

    karamba Активный пользователь

    С нами с:
    10 апр 2012
    Сообщения:
    13
    Симпатии:
    0
    Как сделать градиентную заливку?
    Пишу в css :
    Код (Text):
    1. #body {  background: linear-gradient(black, white);  }
    Почему то не работает. Если явно просто цвет указать без градиента, то работает.
     
  2. html-программист

    html-программист Активный пользователь

    С нами с:
    10 фев 2012
    Сообщения:
    831
    Симпатии:
    4
    Адрес:
    Kiev
    Код (Text):
    1. body{
    2.     background: -moz-linear-gradient(black, white);
    3.     background: -webkit-linear-gradient(black, white);
    4.     background: -o-linear-gradient(black, white);
    5.     background: -ms-linear-gradient(black, white);
    6.     background: linear-gradient(black, white);
    7. }
    Добавлено спустя 1 минуту 41 секунду:
    В файерфоксе так работает, в других браузерах - хз. Для каждого браузера свой синтаксис

    Добавлено спустя 1 минуту 45 секунд:
    Код (Text):
    1. background: -webkit-gradient(linear, left top, left bottom, black, white);
    для старых версий хрома и сафари

    Добавлено спустя 3 минуты 21 секунду:
    В самом начале не забудь указать бекграунд для браузеров, которые были выпущены в доисторический период
    Код (Text):
    1.     body{
    2.        background: #000000;
    3.        background: -moz-linear-gradient(black, white);
    4.        background: -webkit-linear-gradient(black, white);
    5.        background: -o-linear-gradient(black, white);
    6.        background: -ms-linear-gradient(black, white);
    7.        background: linear-gradient(black, white);
    8.        background: -webkit-gradient(linear, left top, left bottom, black, white);
    9.     }
     
  3. karamba

    karamba Активный пользователь

    С нами с:
    10 апр 2012
    Сообщения:
    13
    Симпатии:
    0
    Спасибо, а можно еще спросить? Вот он сделал градиент, но он получился определенной высотой. А как сделать чтобы сделать блок другой высоты?
     
  4. html-программист

    html-программист Активный пользователь

    С нами с:
    10 фев 2012
    Сообщения:
    831
    Симпатии:
    4
    Адрес:
    Kiev
    На словах не понял. Скрином, если можно.
     
  5. karamba

    karamba Активный пользователь

    С нами с:
    10 апр 2012
    Сообщения:
    13
    Симпатии:
    0
    Я понял он делает строки градиента по размеру содержимого.
    [​IMG]
     
  6. html-программист

    html-программист Активный пользователь

    С нами с:
    10 фев 2012
    Сообщения:
    831
    Симпатии:
    4
    Адрес:
    Kiev
    Код (Text):
    1.     background-repeat: no-repeat;