Градиент на jQuery

от автора

Путем экспериментов была найдена реализация градиента, которой и поделюсь.

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/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *