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

Question

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

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

Answer 1

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

---

Редактировать

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

Answer 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 и ниже игнорирует это.

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

Answer 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%
);