CSS 3.0 дал нам возможность создавать CSS градиенты в свойствах background-image без использования картинок.

В настоящее время не все браузеры поддерживают градиенты, и то благодаря хакам.

Для Mozilla Firefox хак выглядит следующим образом.

-moz-linear-gradient(
    center bottom,
    rgb(182,43,53) 42%,
    rgb(219,69,80) 71%,
    rgb(255,97,112) 86%
)

А для браузером на движке webkit (Safari, Chrome, Arora, Konqueror и др.), так.

-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.42, rgb(182,43,53)),
    color-stop(0.71, rgb(219,69,80)),
    color-stop(0.86, rgb(255,97,112))
)

О том, по какому шаблону прописываются свойства в css градиентах, можно прочитать на сайте w3c. Ну а я Вам рекомендую пользоваться сервисами, например gradients.glrzad.com. Он без труда позволяет создавать градиент любой сложности (linear, radial и т.д.), а также выдает код для всех браузеров, которые поддерживают css градиент. Сервис выглядит вот так:

(6 votes, average: 4,33 из 5)

 Loading ...