Путем экспериментов была найдена реализация градиента, которой и поделюсь.
function show_gradient(selector,start_color,end_color){
$('body').find(selector)
.css('background-image', '-webkit-linear-gradient('+start_color+', '+end_color+')')
.css('background-image', '-moz-linear-gradient('+start_color+', '+end_color+')')
.css('background-image', '-o-linear-gradient('+start_color+', '+end_color+')')
.css('background-image', '-ms-linear-gradient('+start_color+', '+end_color+')')
.css('filter', 'progid:DXImageTransform.Microsoft.gradient(startColorstr='+start_color+',endColorstr='+end_color+',GradientType=0)')
.css('background-image', 'linear-gradient('+start_color+', '+end_color+')');
Возможно, похожую функцию уже кто-нибудь писал (далек от мысли, что никто этим не заморачивался), но не нашел рабочую/кроссбраузерную. Так что прошу не пинать, если подобное где-то видели.
Использовать её просто, пример:
<div id="gradient" style="position:relative;width:300px;height:150px;">
</div>
<button onclick="show_gradient('#gradient','#6E146B','#B495B5');$(this).html('Градиент блока поменялся!');">
Поменять градиент
</button>
Проверял работу на IE7, IE9, а также Chrome, FF, Opera последних версий.
Особенно трудно почему-то было «допереть», почему с ....css('background', 'linear-gradient('#6E146B','#B495B5')') не везде срабатывает; писать надо именно 'background-image'
Надеюсь будет кому-нибудь полезно, ещё больше надеюсь на полезные замечания по расширению функционала.
Автор: Den1xxx
