Генератор CSS градиентов

Градиент можно сделать конечно же в Photoshop, но иногда можно обойтись и CSS. Сервис предлагает пользователю в режиме онлайн создать необходимый ему градиент, после вам необходимо будет всего-лишь скопировать код и применить его к своему элементу.

Есть несколько причин, которые могут оттолкнуть использовать данный способ создания градиентов, перечислю:

  • Не все браузеры адекватно понимают сгенерированный код. IE к примеру может вообще его не отобразить. На браузерах Opera, Safari, Firefox, Chrome работает отлично — проверено.
  • CSS градиент имеет большой размер кода. Согласитесь, лучше порезать картинку и прописать всего одну строку кода, чем вставить десять строк, однако быстрота реализация в CSS градиента выше.
  • Градиент-картинку можно использовать в спрайтах — это очень удобно, если вас заботит скорость загрузки сайта.
  • CSS градиент работает и на событиях hover, но опять таки увеличивается объем кода — это огромный минус для некоторых.

В целом в своих проектах я часто использую именно CSS градиенты. Прошло время старых браузеров, а для тех, кто пользуется IE 7 лучше повесить заглушку и сообщить человеку, что он отстал от времени :)

Генерировать градиенты можно с помощью сервиса – 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 );

Другие публикации