Есть несколько причин, которые могут оттолкнуть использовать данный способ создания градиентов, перечислю:
- Не все браузеры адекватно понимают сгенерированный код. IE к примеру может вообще его не отобразить. На браузерах Opera, Safari, Firefox, Chrome работает отлично — проверено.
- CSS градиент имеет большой размер кода. Согласитесь, лучше порезать картинку и прописать всего одну строку кода, чем вставить десять строк, однако быстрота реализация в CSS градиента выше.
- Градиент-картинку можно использовать в спрайтах — это очень удобно, если вас заботит скорость загрузки сайта.
- CSS градиент работает и на событиях hover, но опять таки увеличивается объем кода — это огромный минус для некоторых.
В целом в своих проектах я часто использую именно CSS градиенты. Прошло время старых браузеров, а для тех, кто пользуется IE 7 лучше повесить заглушку и сообщить человеку, что он отстал от времени :)
Сервис для генерации CSS градиентов — www.colorzilla.com/gradient-editor/
Пример генерируемого кода:
background: #e6f0a3;
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043));
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%);
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%);
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%);
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 );
