Pull to refresh

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

Reading time 1 min
Views 53K
Хочу поделиться небольшой, но полезной тулзой для генерации Photoshop-like градиентов. Называется этот инструмент громко — Ultimate CSS Gradient Generator. Но большей значимости ему придает не имя, а создатели — это те же ребята, которые сделали ColorZilla, отличнейший плагин для Firefox.

Но меньше слов, больше дела. Генератор работает очень просто:
  • выбираем из списка нужный нам шаблон (а их там больше сотни)
  • настраиваем размер элементы
  • определяемся с цветами
  • копируем код

Код выходит достаточно чистый, вот пример:
background: #ebf1f6; /* old browsers */
background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* ie */

Это код для


UPD: спасибо Lazio_od за еще одну отличную тулзу.
Tags:
Hubs:
+46
Comments 25
Comments Comments 25

Articles