Путем экспериментов была найдена реализация градиента, которой и поделюсь.
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’
Надеюсь будет кому-нибудь полезно, ещё больше надеюсь на полезные замечания по расширению функционала.
ссылка на оригинал статьи http://habrahabr.ru/post/167229/
Добавить комментарий