Как сделать чистый CSS-div с градиентным фоном?

Скажем, высота div равна 34px, а ширина - 480px. Div должен выглядеть следующим образом:

и я не хочу, чтобы он фактически использовал изображение, просто CSS. Является ли это возможным?

Ответ 1

Это с CSS3. Там даже удобный градиент-генератор, который выводит из него догадки. Конечно, это полностью не поддерживается в IE8 и ниже.

Изменить

Для полноты, как указано sluukkonen, IE поддерживает градиенты в CSS с помощью фильтра filter:progid:DXImageTransform.Microsoft.Gradient.

Ответ 2

Это возможно с помощью CSS3;

Пример: (черный и серый)

mydiv
{

   background-image:
        -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.15, rgb(189,189,189)),
        color-stop(0.58, rgb(0,0,0)),
        color-stop(0.79, rgb(0,0,0))
    )
    -moz-linear-gradient(
        center bottom,
        rgb(189,189,189) 15%,
        rgb(0,0,0) 58%,
        rgb(0,0,0) 79%
    )
}

Но это работает только в браузерах Mozilla и webkit, IE8 и ниже будут игнорировать это.

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

Ответ 3

Есть способы сделать это с помощью -webkit-gradient и -moz-linear-gradient 'functions' как значений background-image. Они используют другой синтаксис, но будут стандартизованы, если спецификация градиента превратит его в окончательный выпуск CSS 3.

/* webkit example */
background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(50,50,50,0.8)),
  to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
);

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);