Как создать чистый CSS div с градиентным фоном?
Скажем, высота div равна 34px, а ширина - 480px. Div должен выглядеть следующим образом:
, и я не хочу, чтобы он на самом деле использовал изображение, только CSS. Является ли это возможным?
3 ответа
Это с CSS3. Есть даже удобный генератор градиентов , который избавляет от догадок. Конечно, это полностью не поддерживается в IE8 и младше.
Править
Для полноты, как упоминалось в sluukkonen , IE поддерживает градиенты в CSS, используя фильтр filter: progid: DXImageTransform.Microsoft.Gradient .
Это возможно с помощью 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 и ниже проигнорирует это.
Надеюсь, это поможет :)
Есть способы сделать это с помощью -webkit-gradient и -moz-linear-gradient «функции» как значения фона -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% );